中图分类号:TP393.01 文献标识码:B 文章编号:1009-2552(2010)01-0108-03Ajax技术与传统Web应用的比较孙启良(济南大学理学院,济南250022)摘 要:Ajax技术是浏览器与服务器交互方式的巨大改进,是Web2.0时代的重要标志。
Ajax技术利用客户端闲置的处理能力,减轻了服务器和带宽的负担,使用户交互变得流畅而连续。
介绍了Aja x的工作原理,基本特点以及与传统Web应用的区别,并给出了一个Ajax实例。
关键词:HTML;Ajax;JSP;JavaScriptComparison between Ajax technology andtraditional Web applicationsSUN Qi liang(School of Science,Jinan University,Jinan250022,China)Abstract:Ajax technology is a tre mendous improvement of the browser and server.It is also an important indicator of Web2.0era.It uses the idle processing power of client to reduce the burden on servers and bandwidth,and then the user interaction has become smooth and continuous.This paper introduces the working principle of Aja x and the difference between traditional Web applications and Aja x.Finally,a section of the source code is given.Key w ords:HTML;Ajax;JSP;JavaScript0 引言Aja x即异步JavaScript和XML,是Web2.0中的一项关键技术,它允许把用户和Web页面间的交互与Web浏览器和服务器间的通信分离开来。
传统的Web应用允许用户填写表单(form),当提交表单时就向Web服务器发送一个请求。
服务器接收并处理传来的表单,然后返回一个新的网页。
这个做法浪费了许多带宽,因为在前后两个页面中的大部分HTML代码往往是相同的。
由于每次应用的交互都需要向服务器发送请求,应用的响应时间就依赖于服务器的响应时间。
这导致了用户界面的响应比本地应用慢得多。
如果严重超过响应时间,服务器干脆告诉用户页面不可用。
另外,某些时候,如果只是想改变页面一小部分的数据,那么如何不必重新加载整个责面,减少用户等待的时间是亟待解决的问题。
现在,这个问题基本得到了解决,除了更优秀的程序设计、编码优化和调整服务器之外,还可以采用Ajax技术。
1 Ajax的工作原理与传统的Web应用不同,Ajax采用异步交互过程。
Ajax在用户与服务器之间引入一个中间介质,消除了网络交互过程中的处理、等待等缺点。
相当于在用户和服务器之间增加了一个中间层,使用户操作与服务器响应异步化。
这样把以前的一些服务器负担的工作转移到客户端,利用客户端闲置的处理能力,减轻服务器和带宽的负担,从而达到节约ISP的空间及带宽租用成本的目的。
传统Web应用程序和Ajax程序工作原理如图1所示。
图1左侧图形为传统Web程序工作原理,此时服务器端承担大量的工作,客户端只有数据显示的功能。
右侧图形为Ajax应用程序工作原理图,客户收稿日期:2009-07-13作者简介:孙启良(1980-),男,讲师,在职硕士研究生,主要研究方向为计算机网络和计算机体系结构。
108图1 传统Web和Ajax工作原理端界面和Ajax引擎都是在客户端运行,这样大量的服务器工作可以在Ajax引擎处实现。
Ajax应用程序的使用,实现了所谓的富客户端![1]。
2 Ajax的基本特征2.1 一个页面就是一个应用程序传统的Web应用程序一般不只一个页面,用户的一次操作往往会带其进入另一个页面。
而对于典型的Aja x应用程序,用户无须在不同的页面中切换,只要停留在一个页面中,由XMLHttpRequest对象从服务器取得数据,然后由JavaScript操作页面上的元素并更新其中内容。
2.2 浏览器中的是应用而不是内容在传统的基于页面的Web应用中,浏览器扮演着哑终端的角色。
它对用户处于操作流程哪一阶段一无所知。
这些信息全部保存在服务器上。
Ajax则不同,它把一部分应用逻辑从服务器端移到了浏览器端。
用户登录后,服务器交付一个客户端给浏览器。
这个应用可以独立处理很多用户交互,对于自己无法独立处理的交互,应用会以后台方式发送请求给服务器,而不会打断用户的操作流程,用户登录的时候,服务器交付给浏览器一个复杂得多的文档,其中包含大量的JavaScript代码。
这个文档将会在整个会话的生命周期内与用户相伴。
2.3 服务器交付的是数据而不是内容在传统的Web应用中,服务器在每个步骤都需要把html文件(模板文件、导航列表和页面布局内容)和数据混合发送给浏览器。
而在Ajax中,只需将服务端处理请求时产生的数据发回给客户端就可以了。
Ajax应用可以通过多种方式来发送数据。
例如,返回一段JavaScript代码、一段纯文本或者一小段XML文档。
但是,无论返回数据采用何种格式,这些方式所传输的数据量都要比传统的Web应用中将所有信息返回的方式少得多[2]。
2.4 用户交互变得流畅而连续在传统的Web应用中,从客户端向服务器端传递数据,通常采用两种形式:一种是超链接,一种是表单。
客户端向服务器端提交一个页面请求,一般情况下此过程需要占用一段时间。
在此时间段内,即当一个页面已提交而下一个页面还没有显示出来的时候,浏览器实际上处于等待的状态。
浏览器甚至还会允许用户单击一些链接。
但这些单击可能会导致一些不可预料的结果,甚至破坏服务器端的操作流程,用户通常应该等到页面刷新完成,才能继续新的操作。
此时Web应用是停顿的,不能连续工作。
页面请求不仅仅是所需的数据,而且是另一个完整的HTML页面。
因此当Web浏览器用新的HT ML页面重绘时,可能会看到闪烁或抖动[3]。
而在Aja x技术实现的Web应用中,除了第一次页面初始化需要从服务器下载大量信息之外,其它情况下都没有页面停顿的情况出现。
此时再向服务器提交请求,不会影响当前页面的其它操作。
因为提交请求是通过异步方式发送数据的,并且用户请求的不是整个HTML页面,只是一些需要的数据信息。
通过Ajax技术,用户在进行请求完毕后,可以继续进行其它的操作,如查看信息等。
这样大量的被浪费在页面刷新时的时间被利用了起来,此时整个网站的操作将是不可间断的,即流畅的。
Ajax的另一个优点可以对丰富的用户操作事件进行捕获。
类似于拖曳这样的复杂UI概念也不再是遥不可及的。
这使得Web应用的UI体验可以全面提升到近乎与桌面应用的UI组件相媲美的高度。
例如,Google中,当用户自搜索框输入一些字符的时候,应用从服务器取回与用户已键入字符串相似的搜索条目(根据全世界其他人的搜索),并且显示在输入框下方的下拉列表中。
3 Ajax异步请求实例首先创建服务器代码,打开记事本,输入下列代码:<%@pa ge contentType=∀text html;charset= gb2312∀%><%@page import=∀java.util.*∀%><%109图2 程序运行 图3 程序运行结果Date d=ne w Date();out.print(d);%>将上述代码保存,名称为ran.jsp 。
在文件中,主要返回当前日期的中文格式的时间。
将该文件直接保存T omcat 安装目录下,即C:\Tomca t 6.0\webapps \下。
现在创建客户端代码,打开记事本,输入下列代码:<html><head><title>Ajax< title><script type=∀text javascript ∀>var xmlHttp;function createXMLHttpRequest(){ if(window.Ac tiveXObject){xmlHttp=ne w ActiveXObject(∀Microsoft.XMLHTTP ∀); 创建XMLHttpRequet 对象}else if (window.XMLHttpRequest){ xml H ttp=ne w XMLHttpRequest(); 创建XMLHttpRequet 对象}}function startRequest(){createXMLHttpRequest();xmlHttp.onreadystatechange=handleStateChange;xmlHttp.open(∀GE T ∀,∀ran.jsp ∀,true);xmlHttp.send(null);}function handleStateChange(){ if(xml H ttp.readySta te==4){ if(xml H ttp.status==200){document.getElementB yId(∀res ∀).innerH TML=xm lHttp.responseText; } }}< script>< head><body><form action=∀#∀><input type =∀button ∀value=∀获取当前时间∀onclick=∀startRequest();∀ >< form><div id=∀res ∀>< div>< body>< html>将上述代码保存,名称为aja x.html,程序运行如图2,运行结果见图3。
在该文件中,函数createXMLHttpRequest()主要用来创建XMLHttpRequest 对象,startRequest ()函数主要作用是向服务器端发送请求信息,其方式为get,发送信息为空,参数值是通过URL 传递到服务端的。
函数handleStateChange ()主要用来处理从服务器端传递的信息,并做出设置。
参考文献:[1] 梁文新,宋强,王占中.Ajax+J SP 网站开发从入门到精通[M].北京:清华大学出版社,2008:135-136.[2] 孙鑫.Servle t J SP 深入详解 基于Tomcat 的Web 开发[M ].北京:电子工业出版社,2008:3-5.[3] 谢希仁.计算机网络[M ].北京:电子工业出版社,2008:236-239.[4] J avaScript 高级程序设计[M ].Nicholas C.Zakas.曹力,张欣,等译.北京:人民邮电出版社,2006:138-141.[5] 吴吉义.A Ne w Approach to Web Applications wi th Ajax[J].四川大学学报:工程科学版,2007,S1:157-161.[6] 田原.基于Ajax 的教学Web 应用[J ].辽宁工程技术大学学报,2007,26(5):737-739.[7] 朱德利.Web2.0的技术特点和信息传播思想[J].现代情报,2005,25(12):74-77.[8] 游丽贞,郭宇春,李纯喜.Ajax 引擎的原理和应用[J ].微计算机信息,2006,22(6):205-208.责任编辑:么丽苹110。