阅读提要 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技术开发Web应用程序
《ExtJS Web应用程序开发指南(第2版)》还结合现今流行的Web框架进行改造,将相关技术融合起来应用。Ajax已经逐渐渗透到Web开发的各个方面了,ExtJS能够与其完美结合。讲解完这些提高内容后,《ExtJS Web应用程序开发...
火龙果软件工程技术中心 如何使用ajax开发web应用程序(一) 如何使用ajax开发web应用程序(二) 如何使用ajax开发web应用程序(三) 如何使用ajax开发web应用程序(一) 在过去,由于为了获得新数据而不得不重新加载...
用AJAX开发智能Web应用程序之基础
卫军、夏慧军、孟腊春编著的《ExtJS Web应用程序开发指南(第2版)》共18章和1个附录,是对第1版的全面升级,增补了大量ExtJS 4.0中的新特性。从基本的ExtJS功能开始讲解RIA Web开发,从而引出用户体验丰富的ExtJS...
介绍了如何应用ajax进行智能web服务的开发
Ajax技术的出现将基于Web的应用程序开发带进了一个全新的阶段,但Ajax主要是基于JavaScript的客户端技术,所以客户端的开发显得越来越臃肿,随之而来的安全性等一系列问题有待进一步研究。
本书主要通过多个Ajax技术制作的实例,向读者逐步深入地介绍使用Aiax技术建设Web 2.0网站的方法、技巧和详细步骤。全书共分为13章,由浅入深、循序渐进地介绍基于Ajax组合查实例、调查程序文例、天气预报实例、会员...
然而如果用传统的方式Javascript进行Ajax开发的话,就会使得应用程序非常难以进行调试,从而降低了生产效率。Google最近推出的GWT有望为我们解决这个难题,GWT是一个开发Ajax应用的框架,它使程序员用Java同时开发...
针对传统的企业级Web应用开发中客户端与服务器端...实际应用表明,Struts2+jQuery Ajax这种方案可以有效提高客户关系管理系统的开发效率及其可维护性和可扩展性,并且极大提升了Web应用程序的响应速度及用户体验效果。
AJAX技术是当前Web应用开发中的一种关键技术,它可以实现异步交互,提高Web应用程序的数据交换速度和响应速度。本文将对AJAX技术的工作原理、主要技术和应用情况进行研究和分析,并讨论基于AJAX技术的搜索引擎与传统...
一、简介 AJAX,一个异步JavaScript和XML的缩略词,是最近出来的技术词语。...本文将帮助你确定在真实世界中何时使用AJAX是最佳选择。 首先,我假定你对缩略词JavaScript和XML部分有一个基本了解。尽管你
使用 Google Web Toolkit、Apache Derby 和 Eclipse 构建 Ajax 应用程序 图文教程
本书从易到难、由浅入深、循序渐进系统地介绍了ASP.NET AJAX(C#)知识点和基于... 本书不仅适合初学ASP.NET AJAX网络应用程序的开发人员,对具有一定ASP.NET 2.0网络应用程序开发经验的开发人员,也会有有益的帮助。
《Web开发敏捷之道:应用Rails进行敏捷Web开发(第3版)》:Ruby on Rails是一个全套的MVC web框架,它能帮你开发高质量又美观的web应用,而且开发速度快得出乎你想象。你只须集中精力于应用程序本身,Rails就会帮你...
利用ZK框架设计的web应用程序具备丰富的胖客户端特性和简单的设计模型.ZK包括一个基于AJAX可自动进行交互式操作的事件驱动引擎和一套兼容XUL的UI组件.利用直观的事件驱动模型,你可以用具有XUL特性的组件来表示你的...
第8章 常见Web框架的ExtJS改造 第9章 ExtJS对Ajax的支持 第10章 增强型模板 第11章 数据模型 第12章 Grid组件 第13章 Tree组件 第14章 ExtJS与服务端框架的整合 第15章 主题 第16章 Ext.Direct 第17章 Draw...
针对ExtJS的Web开发技术,从基础的运行平台的搭建开始讲起,层层深入各个表单、面板和布局的灵活运用,接着剖析详细组件和函数,把Ajax与ExtJS完美结合。 ·对数据模型、高级组件和Struts和Struts 2框架实现整合...
主要内容:ExtJS4.0的...《ExtJS Web应用程序开发指南(第2版)》特色:阅读门槛低——不要求读者对ExtJS有所了解,只要熟悉、JavaScript编程,《ExtJS Web应用程序开发指南(第2版)》就能带你从头开始领略ExtJS的风采。