`

怎样使用AJAX进行WEB应用程序开发

    博客分类:
  • Ajax
阅读更多
阅读提要 AJAX,一个异步JavaScript和XML的缩略词,是当今快速发展的Web开发界十分热门的技术。在这项新技术提供巨大能力的同时,它也燃发了在"Back"按钮问题上的不容置疑的争论。本文作者将向你解释怎样在真实世界中使用AJAX以及怎样在一个工程中评估它的价值。在你读完本文后,你就会明白什么是AJAX,在什么情况下,为什么以及怎样使用这项技术。

  一、 简介

  AJAX,一个异步JavaScript和XML的缩略词,是最近出来的技术词语。异步意味着你可以经由超文本传输协议(HTTP)向一个服务器发出请求并且在等待该响应时继续处理另外的数据。这就意味着,例如,你可以调用一个服务器端脚本来从一个数据库中以XML方式检索数据,把数据发送到存储在一个数据库的服务器脚本,或者简单地装载一个XML文件以填充你的Web站点而不需刷新该页面。然而,在这项新技术提供巨大能力的同时,它也引起了在"Back"按钮问题上的很多争论。本文将帮助你确定在真实世界中何时使用AJAX是最佳选择。

  首先,我假定你对缩略词JavaScript和XML部分有一个基本了解。尽管你能通过AJAX请求任何类型的文本文件,但是我在此主要集中讨论XML。我将解释怎样在真实世界中使用AJAX以及怎样在一个工程中评估它的价值。在你读完本文后,你将会明白什么是AJAX,在什么情况下,为什么以及怎样使用这项技术。你将要学习,在保持给用户提供直观体验的同时怎样创建对象,发出请求以及定制响应。

  这个示例实现了一个简单的请求-它装载一个包含页面内容的XML文件并且分析数据以把它显示在一个HTML页面中。

  二、 常规属性和方法

  表1和2提供了一个属性和方法的概述-它们为Windows Internet Explorer 5,Mozilla,Netscape 7,Safari 1.2,和Opera等浏览器所支持。

  表1属性

属性 描述
onreadystatechange 当请求对象变化时该事件处理器激活。
readyState 返回指示对象的当前状态的值。
responseText 来自服务器的响应串的版本。
responseXML 来自服务器的响应的DOM兼容的文档对象。
status 来自服务器的响应的状态码。
statusText 以一个字符串形式返回的状态消息。

  表2方法

方法 描述
Abort() 取消当前HTTP请求。
getAllResponseHeaders() 检索所有的HTTP头值。
getResponseHeader("headerLabel") 从响应体中检索一个HTTP头部的值。
open("method","URL"[,asyncFlag[,"userName"[,"password"]]]) 初始化一个MSXML2.XMLHTTP请求,并从该请求指定方法,URL和认证信息。
send(content) 发送一个HTTP请求到服务器并接收响应。
setRequestHeader("label", "value") 指定一个HTTP头的名字。

  三、 从哪里开始

  首先,你需要创建XML文件-后面我们对之进行请求并作为页面内容进行分析。你正在请求的文件必须与目标工程驻留在相同的服务器上。

  下一步,创建发出请求的HTML文件。当页面通过使用页面主体中的onload方法进行加载时,该请求发生。接着,该文件需要一个有ID的div标签,这样当我们准备好要显示内容时就可以对之进行定位。当你做完所有这些,你的页面的主体看上去如下:

<body onload="makeRequest('xml/content.xml');">
<div id="copy"></div>
</body>

  四、 创建请求对象

  为了创建请求对象,你必须检查是否浏览器使用XMLHttpRequest或ActiveXObject。这两个对象之间的主要区别在于使用它们的浏览器。Windows IE 5 及以上版本使用ActiveX对象;而Mozilla,Netscape 7,Opera和Safari 1.2及以上版本使用XMLHttpRequest对象。另外一个区别是你创建对象的方式:Opera,Mozilla,Netscape和Safari允许你简单地调用该对象的构造器,但是Windows IE需要把对象的名字传递到ActiveX构造器中。下面是怎样创建代码来决定要使用哪个对象和怎样创建它的示例:

if(window.XMLHttpRequest)
{ request = new XMLHttpRequest();}
else if(window.ActiveXObject)
{ request = new ActiveXObject("MSXML2.XMLHTTP");}
五、 发出请求

  现在既然你已经创建了你的请求对象,那么你已经为向服务器发出请求作了准备。创建一个到事件处理器的参考以听取onreadystatechange事件。然后,该事件处理器方法将在状态发生变化时作出响应。一旦我们完成请求,我们就开始创建这个方法。打开连接以GET或POST一个定制的URL-在此是一个content.xml,并且设置一个布尔定义-是否你想要进行异步调用。

  现在到了发出请求的时间了。在这个示例中,我使用了null,因为我们使用的是GET;为了使用POST,你需要使用下面这个方法发出一个查询串:

request.onreadystatechange = onResponse;
request.open("GET". url, true);
request.send(null);

  六、 定制加载和错误处理消息

  你为onreadystatechange方法创建的事件处理器正是集中进行加载和处理错误的场所。现在到了考虑用户并针对他们与之交互的内容的状态提供反馈的时候了。在这个实例中,我针对所有的装载状态代码提供反馈,并且也对最经常发生的错误处理状态代码提供一些基本的反馈。为了显示请求对象的当前状态,readyState属性包括显示在下表中的一些值。

描述
0 未初始化,对象没有用数据进行初始化。
1 装载中,对象正在装载它的数据。
2 装载结束,对象完成了它的数据的装载。
3 可交互,用户能与对象交互了,尽管它还没有装载结束。
4 完成,对象已经完全被初始化。

  W3C中有很长的一串有关HTTP状态代码的定义。我选择了两个状态代码:

  ·200:请求成功了。

  ·404:服务器没有找到与所请求的文件相匹配的任何东西。

  最后,我检查任何另外的状况代码-它们将生成一个错误并提供一个一般错误信息。下面是一个代码示例-你可以用之来处理这些情况。注意,我在定位我们前面在HTML文件的主体中创建的div ID并且对它应用装载和/或错误信息-通过innerHTML方法-这个方法用于设置在div对象的开始和结束标签之间的HTML:

if(obj.readyState == 0)
{ document.getElementById('copy').innerHTML = "Sending Request...";}
if(obj.readyState == 1)
{ document.getElementById('copy').innerHTML = "Loading Response...";}
if(obj.readyState == 2)
{ document.getElementById('copy').innerHTML = "Response Loaded...";}
if(obj.readyState == 3)
{ document.getElementById('copy').innerHTML = "Response Ready...";}
if(obj.readyState == 4){
if(obj.status == 200){ return true; }
else if(obj.status == 404)
{
// 添加一个定制消息或把用户重定向到另外一个页面
document.getElementById('copy').innerHTML = "File not found";
}
else
{document.getElementById('copy').innerHTML = "There was a problem retrieving the XML."; }
}

  当状况代码为200时,这意味着请求成功。下面开始进行响应了。

  七、分析响应

  当你准备好分析来自请求对象的响应时,真正的工作开始了。现在你可以用你请求的数据开始工作。仅为测试目的,在开发期间,可以使用responseText和responseXML属性来显示来自响应的原始数据。为了存取XML响应中的结点,首先使用你创建的请求对象,定位到responseXML属性以检索(你可能已经猜测出来)来自响应的XML。定位到documentElement-它检索一个到XML响应的根结点的参考。

var response = request.responseXML.documentElement;

  现在既然你有了到响应的根结点的参考,那么你可以使用getElementsByTagName()以结点名字来检索childNodes。下面一行用一个头部的nodeName来定位一个childNode:

response.getElementsByTagName('header')[0].firstChild.data;

  使用firstChild.data可以允许你存取该元素中的文本:

response.getElementsByTagName('header')[0].firstChild.data;

  下面是怎样创建这些代码的完整的例子:

var response = request.responseXML.documentElement;
var header = response.getElementsByTagName('header')[0].firstChild.data;
document.getElementById('copy').innerHTML = header;

  八、需求分析

  现在既然你知道怎样使用AJAX的基础知识,那么下一步就是决定是否在一工程使用它。须记住的最重要的事情是,在你还没有刷新页面时你无法使用"Back"按钮。为此,可以先专注于你的工程中的一小部分-它能够从使用这种类型的交互中受益。例如,你可以创建一个表单-它在用户每次输入一个输入字段或一个字母时查询一个脚本以便进行实时校验。你可以创建一个拖放页面-在释放一项时,它能够把数据发送到一个脚本中并把该页面的状态保存到一个数据库中。使用AJAX的理由毫无疑问是存在的;并且这种使用无论对开发者还是用户都会带来益处;这全依赖于具体的条件和执行情况。

  还有其它方法可用来解决"Back"按钮的问题,例如使用Google Gmail-它现在能够为你的操作提供一种撤消功能而不刷新该页面。以后还会出现许多更具创造性的例子-它们将通过提供给开发者创建独特实时的体验的手段给用户带来更大的好处。

  九、结论

  尽管AJAX允许我们构建新的和改进的方式来与一个WEB页面进行交互;但是作为开发者,我们需要牢记产品是不考虑技术的;它关心的是用户以及其如何与用户进行交互。没有了用户群,我们构建的工程毫无用处。基于这个标准,我们就能评估应该使用什么技术以及何时使用它们来创建对相应用户有用的应用软
分享到:
评论

相关推荐

    如何使用Ajax技术开发Web应用程序

    Ajax,即Asynchronous JavaScript and XML,是一种用于创建交互式网页应用的技术,允许Web应用程序在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容。这种技术显著提升了用户体验,因为页面的响应速度更...

    ajax开发智能web应用程序

    **Ajax技术详解与智能Web应用程序开发** Ajax(Asynchronous JavaScript and XML)是一种在无需刷新整个网页的情况下,能够更新部分网页的技术。它通过在后台与服务器交换数据并局部更新页面,提高了用户体验,使得...

    用AJAX开发智能Web应用程序之基础

    在智能Web应用程序开发中,AJAX的应用场景非常广泛,例如: 1. 表单验证:用户输入数据时,可以实时检查其有效性,而无需等待整个表单提交。 2. 动态加载内容:如分页加载、无限滚动,只加载用户需要的部分内容,...

    ExtJS Web应用程序开发指南(第2版)

    《ExtJS Web应用程序开发指南(第2版)》还结合现今流行的Web框架进行改造,将相关技术融合起来应用。Ajax已经逐渐渗透到Web开发的各个方面了,ExtJS能够与其完美结合。讲解完这些提高内容后,《ExtJS Web应用程序开发...

    基于Ajax技术的Web 2.0开发应用

    总结来说,Ajax技术的引入极大地推动了Web 2.0的发展,使得Web应用程序更加动态和交互性更强。然而,随着客户端代码的增加,安全问题也随之而来,例如XSS(跨站脚本攻击)和CSRF(跨站请求伪造)等。因此,在利用...

    ExtJS+Web应用程序开发指南(第2版).pdf

    但是,可以从标题“ExtJS+Web应用程序开发指南(第2版)”中提取相关的知识点。 ExtJS是一款使用JavaScript语言编写的开源前端框架,特别适用于创建单页面应用程序。它为开发者提供了丰富的组件库,使得开发者可以...

    ExtJS Web应用程序开发指南(第2版)

    卫军、夏慧军、孟腊春编著的《ExtJS Web应用程序开发指南(第2版)》共18章和1个附录,是对第1版的全面升级,增补了大量ExtJS 4.0中的新特性。从基本的ExtJS功能开始讲解RIA Web开发,从而引出用户体验丰富的ExtJS...

    ExtJS Web应用程序开发指南(第2版).zip

    在《ExtJS Web应用程序开发指南(第2版)》中,开发者可以深入了解如何利用这个强大的框架来创建功能丰富的Web应用。这本书涵盖了从基础概念到高级特性的全方位指导,旨在帮助读者熟练掌握ExtJS的开发技巧。 1. **...

    ajax技术在web模式开发中的应用研究

    ### AJAX技术在Web模式开发中的...通过对AJAX技术的研究和应用,我们可以开发出更高质量、更富交互性的Web应用程序,为用户提供更好的上网体验。未来,随着Web技术的进一步发展,AJAX将在更多领域展现出其独特的价值。

    web应用程序ajax应用

    Web应用程序的Ajax应用是现代网页开发中的关键技术,它极大地提升了用户体验,通过异步数据传输实现了页面的无刷新更新。Ajax,全称为"Asynchronous JavaScript and XML"(异步JavaScript和XML),虽然名字中包含XML...

    Web 2.0动态网站开发 : Ajax技术与应用光盘

    Web 2.0是互联网发展的一个重要阶段,它标志着用户从...总之,Ajax技术是Web 2.0时代的重要组成部分,它极大地改变了我们使用互联网的方式,通过这本书的学习,开发者可以掌握创建动态、交互性强的Web应用程序的技能。

    AJAX技术在Web开发中的应用.pdf

    同时,AJAX技术也可以与其他客户端技术结合使用,例如与Flash、Silverlight等技术结合使用,提高Web应用程序的交互性和视觉效果。 AJAX技术是Web2.0时代的核心技术之一,对于Web应用程序的发展产生了深远的影响。...

    基于Ajax构建web应用程序的研究.pdf

    【Ajax技术概述】 Ajax(Asynchronous JavaScript and XML)是一种用于创建高效、动态Web应用程序的技术,...在实际应用中,理解并掌握Ajax的工作原理和处理流程,能帮助开发者构建更加高效和用户友好的Web应用程序。

    《Ajax应用开发典型实例》

    本书主要通过多个Ajax技术制作的实例,向读者逐步深入地介绍使用Aiax技术建设Web 2.0网站的方法、技巧和详细步骤。全书共分为13章,由浅入深、循序渐进地介绍基于Ajax组合查实例、调查程序文例、天气预报实例、会员...

    AJAX技术和Web应用.pdf

    使用 AJAX 技术可以构建更为动态和响应更灵敏的 Web 应用程序。例如,以“级联菜单”为例,使用 AJAX 技术可以在不刷新整个页面的情况下实时获取服务器端的数据,提高用户体验和满意度。 六、 结论 AJAX 技术是 ...

    ASP.net AJAX Web应用开发秘诀.rar

    标题"ASP.NET AJAX Web应用开发秘诀"暗示了该压缩包可能包含一系列深入的教程、指南或案例研究,揭示了在开发高效、动态的ASP.NET AJAX Web应用程序时的关键技术和策略。 描述中的重复信息"ASP.NET AJAX Web应用...

    利用 Google Web Toolkit 在 Java 框架中开发 Ajax 应用程序

    "利用 Google Web Toolkit 在 Java 框架中开发 Ajax 应用程序" 这个标题提到了两个关键技术和一个目的。Google Web Toolkit(GWT)是主要工具,它允许开发者使用 Java 语言来编写前端的 AJAX 应用程序。Ajax,即异步...

    北大青鸟开发基于Ajax和控件技术的Web应用系统考试

    在.NET框架下,控件技术是构建Web应用程序的重要工具。ASP.NET提供了一整套丰富的服务器控件,如Button、Label、TextBox等,它们在服务器端处理事件,然后生成HTML代码发送到客户端。控件技术使得开发过程更为简便,...

Global site tag (gtag.js) - Google Analytics