Ajax技术的原理与应用

第16卷第1期铁路推广与应用Vol 16 No. 1POPULARIZATION AND APPLICATION文章编号:10058451(2007)01-0027-03Ajax技术的原理与应用柯昌正,黄厚宽(北京交通大学计算机与信息技术学院,北京100044)摘要:Ajax( Asynchronous JavaScript and XML)技术是一种新型的Wcb应用开发技术,通过适当的应用Ajax技术,可以为用户提供更好的Web休验。介绍Ajax技术的基本原理和工作流程,列举Ajax技术的一些典型应用,分析Ajax技术的优劣,并指出Ajax技术的适用范围与其发展趋势。关键词:Ajax; XmlhTtprequEst;KML;DOM;异步交互中图分类号:U291.52文献标识码:APrinciple and application of Ajax technologyKE Chang-zheng, HUANG Hou-kuanSchool of Computer and Information Technology, Beijing Jiaotong University, Beijing 100044, China)Abstract: Ajax(Asynchronous JavaScript and XML)was a new approach to Web applications, it was used appropriately toprovide user with better experience of Web. It was presented basic principle and working process of Ajax, enumeratedsuccessfully applications of Ajax and analyzed the advantages and disadvantages of Ajax. In addition, it was pointed out theapplicability of Ajax and predicted the trend of Ajax developmentKey words Ajax XmlhTtpreqUest; Xml; Dom; asynchronous interaction因特网已经经历了翻天覆地的重大变化。最早1.1 XmlhTtpreqUest它只有基于文本的简单Web浏览器,供科学家之间XmlhTtprequEst是Ajax当中最重要的也是最交流研究心得;如今,它已经成为商务和信息的中核心的技术,它最早是在IE5中通过一个名为心,逐渐渗入到人们的日常生活中。随着Web应用 XmlhttP的 ActiveX对象来实现的。 XmlhttP对技术的不断发展,人们对于因特网的性能要求也越象使得页面中的脚本具有了在不刷新页面的情况下来越高,如今,用户已经不满足于像以前那样填写直接与服务器端通信的能力。与此对应, Mozilla、表单,点击“提交”按钮,然后等待页面跳转的同 Opera和 Safari等其他浏览器也实现了类似的对象,步请求/响应模式,他们需要的是一种就像任何桌称作 XmlhTtprequEst对象。 XmlhTtpreqUest是目面应用程序那样流畅、快捷和人性化的Web体验。前这个技术的正式名称。Ajax技术正是为了满足用户的这种需求而应运而生1.2XML( eXtensible Markup Language)的,它为浏览器提供了与服务器端异步通信的能XML( eXtensible Markup Language)具有一种力,从而使用户从请求/响应的循环中解脱出来,这开放的、可扩展的和可自描述的语言结构,目前,它样,使得Web浏览器看起来就像是即时响应的桌面已经成为因特网上数据和文档传输的标准。在应用应用程序一样。Ajax技术时, XmlhtTprequEst对象可以选择使用XML作为与服务器端通信的数据格式。1Ajax简介1. 3 DOM(Document Object Model)DOM( Document Object Model)是面向HTML术语Ajax是 Asynchronous JavaScript and XML和XML文档的API,它为文档提供了结构化表示,并的缩写。实际上,Aax并不是什么新技术,它是由定义了如何通过脚本来访问文档结构。在应用Ajax几种蓬勃发展的技术以新的方式组合而成的,这几技术中国煤化工理XML文档和更种技术分别如下。新H1.4HCNMHG收稿日期:20060729作者简介:柯昌正,在读硕士研究生;黄厚宽,教Javascript是一种在浏览器端大量使用的编程语推广与应用铁路计算机应用第16卷第1期言,它可以使用浏览器中的很多对象,包括 XmlhTtpAjax实现异步请求/响应模式步骤如下:Request。在Ajax中, Javascript通过调用 XmlhTtpre(1)创建 XmlhTtp reQuesT对象。如前所述, Ajaxquest对象的属性和方法与服务器端进行数据交互,的核心是 JavaScript中的 XmlhTtpreqUest对象,因同时还可以利用DOM的APⅠ来解析从服务器端返此,首先应当创建 XmlhTtpreqUest对象。以下代码回的XML数据和更新HTML页面的内容。显示了如何创建一个 XmlhtTp reqUest对象:if (window. XmlhTtp reQuesT2Ajax技术的原理和L作流程xmlhttprEquest=newXmlhtTprequeSto2Ajax技术的原理else if (window. ActiveXObject)Ajax的工作原理就是相当于在浏览器和服务器xmlhttprequest=newActivexobject("miCrosOft之间加了一个中间层,使用户操作与服务器响应异 XmlhttP");步化。而这一中间层所要做的工作都是由Ajax引擎( Ajax engine)来完成的。实际上,Ajax引擎就是一由于各个厂商的浏览器对于 XmlhtTprequeSt些复杂的 Javascript程序,这些程序通过调用ⅹMLHp对象的底层实现不同,因此,在创建时,应当确保Request对象的属性和方法来与服务器端进行数据与浏览器的兼容。交互,然后再通过DOM来解析处理XML文档和部(2)向服务器端发送请求。在创建了 XmlhTtpre分更新HTML页面的内容。quest对象后,就要向服务器端发送请求了。 XmlhTtp-st对象中的open(和 sendo方法可以实现此功能,如下所示boolean asynchronous)时间XmlhtTprequEst. sendon(方法的第1个参数method是HTTP请求方式,可以为GET和POST。按照HTTP规范,该参系统处理系统处理系统处理系统处理服务器端数要大写;否则,某些浏览器可能无法处理请求;第2个参数是服务器端请求页面的URL;第3个参图1Ajax的异步请求/响应模式数 asynchronous是布尔类型,如果为true,表示此通过Ajax引擎这样一个中间层,浏览器就可以次请求为异步请求模式, JavaScript函数在发送完这实现与服务器端的异步通信,如图1。当用户通过个请求之后将继续执行,而不等待服务器响应。如浏览器提交请求时,请求数据将发送给Ajax引擎。果为 false,表示此次请求为同步请求模式, JavaScriptAjax引擎捕获用户输入的请求数据然后再向服务器函数在发送完这个请求之后要等待服务器的响应发送请求,此时,浏览器不用等待服务器的响应。因然后再继续执行。由此可见,Ajax不仅可以提供异此用户可以继续输入数据。同时用户屏幕上的表单步请求/响应模式,而且也能够提供一般的同步请也不会闪烁、消失或延迟。服务器处理完用户请求求/响应模式。之后,返回处理结果并改变HTP就绪状态,一旦sendo方法的参数是空或是null,调用 sendo方HTTP的就绪状态发生改变,Ajax引擎就会调用相法就会向服务器端发送一次请求对应的回调函数来接收这些处理结果并将它们更新(3)服务器处理完请求后,调用回调函数;创到页面的指定部分,浏览器无需刷新整个页面就能建 XmlhTtprequEst对象向服务器发送一个HTP请更新页面的部分内容,这样,就会让用户感觉到应求后,要决定当收到服务器的响应后,需要做什么。用程序是立即完成的,表单没有提交而页面的部分这需中国煤化工象用哪一个函数来内容就发生了改变,使得Web浏览器看起来就像是处理CNMHG理函数叫做回调函即时响应的桌面应用程序一样数。 XmlhTtpreQuesT对象提供∫ onreadystatechange22Ajax的工作流程属性来指定回调函数,如下所示:16卷第1期Ajax技术的原理与应用推广与应用XmlhTtpreqUest. onreadystatechange= Callback-在这里,正是应用了Ajax技术,使得地图并不是以Function Name s刷新的方式显示,而是每次都在原有数据的基础上Callback Function Name就是回调函数的函数名。以增量方式显示。这样,用户感觉就好像是在自己(4)回调函数解析服务器端返回处理结果并将的计算机上查看本地的地图一样。微软也在积极开它们更新到页面指定部分。发Ajax应用:它将Ajax技术应用到 MSN Space上在检查完请求的状态值后,回调函数就可以处面。当用户使用 MSN Space提交回复评论时,浏览理从服务器端得到的数据了。有两种方式可以得到器会暂时停顿一下,然后在无刷新的情况下把用户这些数据:提交的评论显示出来,这个就是应用了Aax的效以文本字符串的方式返回服务器端的响应数据,果。目前,Ajax应用最普遍的领域是GIS-Map方面。如下所示:GIS的区域搜索强调快速响应,Ajax的特点正好符var response= XmlhTtpreqUest. responsetext;合这种要求。以 XMLDocument对象方式返回服务器端的响在应用Ajax技术开发过程当中,处于核心位置应数据,如下所示的Ajax引擎实际上是一些复杂的 JavaScript程序。随var response= XmlhTtprequEst. responsexml;着网络应用和界面表现的复杂化,使用面向过程的在以 XMLDocument对象方式返回服务器端的 Javascript语言描述表现逻辑将会变得很困难。同响应数据后,需要利用DOM来解析 XMLDocument时, JavaScript的兼容性和调试都会成为使用Ajax技对象,从中提取出响应数据,如下所示:术的一个障碍。为了解决这些问题,开发人员已经var result= response. getElementsByTag Name开发出了一些基于Ajax技术的框架,方便了开发人Cnode)[O]. first Child. data员使用,有利于Ajax技术的进一步推广。以上语句返回了node节点的数据当然,任何技术都是有局限性的,Ajax也不例在得到服务器端返回的响应数据后,就可以根外。Ajax更新页面无需刷新重载,这也使传统的据响应数据来更新页面内容了,DOM也提供了对些用户交互行为变得不可用,如后退、前进和刷新页面中各个对象的读写支持,如下所示:等。另外,移动设备(如手机、PDA等)现在还不document. get Element Byld( message) innerHTML=能很好的支持Ajax,Ajax对流媒体的支持也没有resultJava applet和 Flash这样成熟的技术好。因此,一些以上语句将页面中id为 message的对象的内容辅助的平台和插件的开发也将是Ajax技术应用当中更新为变量 result所代表的内容。由此可见,通过重要的一部分DOM,就可以方便地完成对页面内容的更新4结束语3Ajax技术的应用Ajax技术实现了无刷新更新页面,它减轻了服因为Ajax技术的精髓是用异步交互替代了传统务器的负担,减少了客户实际和心理的等待时间的同步交互,所以当用户操作时间大于服务器响应让客户获得桌面程序一般的交互体验。更好的Ajax时间的时候,使用Ajax的效果非常明显。而当程序应用需要更多的客户端的开发和对当前的Web应性能的瓶颈在于服务器响应时间的时候,Ajax无法用理念的思考。良好的用户体验来源于处处为用户解决程序运行缓慢的问题。因此,Ajax更适合应用考虑的理念,而不单纯是某种技术。在交互频繁的轻量级Web上。在应用Ajax开发方面, Google公司成功地将参考义献Ajax技术应用到它们的商业产品中。GoogleMap和BrettMcLaughlin.AJAXI简介Eb/oL].http:/blog.csdn.net/litheGoogle Suggest都应用了这项技术。当用户在使用中国煤化工Google Map浏览地图时(这里所说的浏览包括地图(2]柯CN MHGwW. blog- java. net/.的放大缩小,以及地图的平移),并没有向服务器提(3]李刚、宋伟,邱哲.征服Ajax+ -lucence-构建搜索引交什么请求,就可以浏览到地图各个部分的内容。擎M].北京:人民邮电出版社,2006