基于AJAX技术的WEB异步交互的探索与研究

蔡志荣

（绍兴职业技术学院，浙江 绍兴 312000）

基于AJAX技术的WEB异步交互的探索与研究

蔡志荣

（绍兴职业技术学院，浙江 绍兴 312000）

AJAX是Web客户端构建技术，它面向异步消息通讯机制,利用它可以构建动态、快速、灵活的Web应用程序。它不但能让上网用户有更好的体验，而且有效地减轻服务器和带宽的压力。本文将着重介绍AJAX的概念、工作原理，与传统Web应用模型进行比较。

AJAX；异步交互；通讯

随着互联网的不断发展和网络各方面信息量的剧增，网络通讯能力的不断提高，如何使Web响应更加灵敏，数据传输更加快捷，已成为当今关注的热点。应用系统所采用的技术也由早期的C／S(Client／Server)模式向基于B／S(Browser／Server)的应用模式进行转变。这种转变避免了繁琐的部署工作，体现了瘦客户的开发理念，但同步交互方式也带来客户端响应速度慢的问题，并且始终困扰着最终用户。基于AJAX的Web技术改变原有的同步交互为异步交互方式，使页面在后台按需获取数据，这样不仅节省了带宽，更大大提升了用户体验。

一、AJAX的概念

AJAX全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。它实际上是几项技术按一定的方式组合在一起，在共同的协作中发挥各自的作用。这些技术包括Javascript、XHTML、CSS、DOM、XML、XSTL 及 XMLHttpRequest，在AJAX中，各种技术各司其职：使用XHTML和CSS进行数据的标准化呈现；使用DOM实现动态显示和交互；使用XML和XSTL进行数据交换与处理；使用XMLHttpRequest对象进行异步数据读取；使用Javascript绑定和处理所有数据。

AJAX技术的核心是JavaScript对象XMLHttpRequest。Web开发人员可以利用该对象在不刷新整个页面的前提下，向服务器端发送请求；服务器端对客户端发来的请求进行处理后，将响应发送给客户端；客户端再次利用XMLHttpRequest对象接受服务端的响应，并利用DOM将结果显示给用户。这样就可以像桌面应用程序一样，只同服务器进行数据层面的交换，而不用每次都刷新界面，也不用每次将数据处理的工作提交给服务器来做，这样既减轻了服务器的负担又加快了响应速度，缩短了用户等候的时间。

二、AJAX的工作原理

在传统的浏览器与服务器的交互方式中“采用同步方式”，由用户触发一个HTTP请求到服务器，服务器对其进行处理后再返回一个新的Web页到浏览器。每当服务器处理客户端提交的请求时，用户都只能空闲等待，必须等到服务器把全部的数据传输完成后才能进行下一项操作，并且哪怕只是一次很小的交互，只需从服务器端得到很简单的一个数据，服务器都要返回一个完整的HTML页作为响应结果，用户每次都要浪费时间和带宽去重新读取整个页面。

服务器的响应时间由多方面因素共同决定，如服务器硬件性能、服务器软件设置、网络因素等。当服务器正在处理或数据传输过程中，用户只是在等待，如此就会让用户产生不好的体验，这种体验就会让用户在下次访问时犹豫，从而可能失去用户。此外，前后两个页面中的大部分HTML代码往往是相同的，也就是大部分数据信息已在客户端，那就不需要再次从服务器中获取，用户只要从服务器中重新获取新内容即可，这样不仅可以减少数据传输，也可以加快用户数据的读取。

现在使用的AJAX技术是将几种成熟技术按一定的方式结合在一起，通过协作发挥各自作用，包括：使用XHTML和CSS标准化呈现；使用DOM实现动态显示和交互；使用XML和XSLT进行数据交换与处理；使用XMLHttpRequest进行异步数据读取；用JavaS-cript绑定和处理所有数据。

AJAX需要一个稳定、响应及时的服务器向引擎发送内容，作为必要的服务端处理逻辑，确保向AJAX引擎发送的数据格式是正确的。

AJAX的工作原理相当于在用户和服务器之间加了一个中间层AJAX引擎，从而实现用户操作与服务器响应的异步化。这样把以前的一些服务器负担的工作转嫁到客户端，利于客户端闲置的处理能力来处理，减轻服务器和带宽的负担，从而达到节约ISP的空间及带宽租用成本的目的。但并不是所有的用户请求都提交给服务器，像一些数据验证和数据处理等都交给AJAX引擎自己来做，只有确定需要从服务器读取新数据时再由AJAX引擎代为向服务器提交请求。传统的Web应用程序模型和基于AJAX的Web应用模型分别所示。

三、AJAX的优点分析

基于AJAX技术的WEB异步交互系统相比于传统的模式的系统具有以下一些优势：

1.减轻服务器的负担和减少网络流量

AJAX的原则是“按需取数据”，可以最大程度地减少冗余请求，减少相同且不必要的数据传输，减少响应对服务器造成的负担。“按需取数据”的意思就是根据客户需求，用什么数据就取什么数据、用多少数据就取多少数据，不会有数据的冗余和浪费，减少了数据下载总量，而且更新页面时不用重载全部内容，只更新需要更新的那部分，既缩短了用户等待时间，也减少了资源的浪费。还可以把服务器负荷转嫁到客户端，利于客户端闲置的处理能力来处理，如表单验证、客户端数据网格排序、生成图表等。“按需取数据”的方式不仅可以使用户从服务器中下载数据尽可能减少，而且也减轻了服务的负担，提高了单位时间服务器可以处理的用户数据。

AJAX技术的试验：Using AJAX to Improve the Bandwidth Performance ofWeb Applications

（1）一个10k的页面：AJAX技术，在交互中只刷新网页中部分需要更新数据2-3k，传统的整页刷新模式需整页重载10k；

（2）交互次数越多，AJAX应用的带宽节省效果越明显；

（3）整页刷新模式虽然需要重新载入图片等，AJAX则不用；

在此次条件的试验过程中：AJAX技术总计节省了超过61%。远远超过预期的50%而且随着交互次数增加，节省率还会更高。

2.带来更好的用户体验

AJAX使用XMLHttpRequest对象发送请求并得到服务器响应，在不重新载入整个页面的情况下用Javascript操作DOM最终更新页面。所以在读取数据的过程中，用户所面对的不是白屏，是原来的页面内容（也可以加一个Loading的提示框让用户知道处于读取数据过程），只有当数据接收完毕之后才更新相应部分的内容。这种更新瞬间完成，用户几乎感觉不到，这种体验是十分美妙的。而传统方式浏览器提示用户正在加载页面，这种过程对于用户来说是非常痛苦的，用户不能做其他事情，只能等待加载工作完成后才能进行继续操作。在本系统中，利用CSS，模仿了C/S应用程序的菜单、面板等，让用户拥有更好的使用体验，感觉就像在使用一个C/S程序一样。

开发人员和设计人员开始认识到不仅大型的用户体验在市场上是成功的，而且也认识到这种体验是怎么来影响用户的开销的。基于AJAX技术的google地图比传统的选择MapQuest更成功，证明了提供更好的用户体验的产品的成功。AJAX技术是使网络应用有更好的可用性的一个领导性的技术。它允许从服务器端请求少量的信息，而不是整个网页。它增加了页面数据的更新但同时减少了页面的刷新和刷新等待，这些问题从网络一诞生就折磨着Web应用。

人们已经知道他们需要一个优秀的用户界面并且有对该界面的投资意愿。前提条件是：用户能够快速地取得信息，不管数据是一个内部网的应用还是一个广域网的服务，快速是用户最直观的体验。

3.进一步促进页面呈现和数据的分离

在B/S模式的系统中，页面呈现和数据本身没有清晰的界限，数据和数据表现的格式混杂在一起，而基于AJAX技术的B/S系统采用XML作为数据的载体，数据通过DOM解析之后表现出来，能够做到数据与数据表现的彻底分离，有利于分工合作、减少页面的修改引起的Web应用程序错误，提高效率，更加适用目前的系统要求。

4.公开标准

AJAX技术是基于被各大浏览器和平台都支持的公开标准的技术。这意味着该技术不怕技术提供商的技术封锁。组成AJAX技术的大多数技术都能放心地使用很多年，而那些不是热点的、最新的和未经考验的技术只能使用一段时间。

5.客户端分担些工作，减低了后端的负载

AJAX技术把一部分工作分担到客户端完成，客户端完成工作的速度必然大大快于将数据发送到服务器运算完成后再返回到客户端。虽然服务器的运算能力非常强大，但是服务器同一时间可能需要处理众多的客户端的运算请求，也会削弱服务器运算能力，不可忽略的是一般情况下客户端的闲置资源是非常多的。除此之外，真正减慢速度的原因是，客户端的每个操作都将伴着大量的数据需要传输，这不仅会大大占用服务器资源，而且受网络环境的影响，传输并不一定会很及时。利用客户端的闲置资源分担些客户端工作，减低了后端的负载，给用户较快的响应。

在传统交互模式中，服务端对客户端的数据处理都是以页面为单位的，客户端提交页面表单，服务器分析提交数据后会将整个页面重新生成为HTML+CSS发回给客户端呈现。很多时候程序其实只是希望提交很小一部分数据，并改变一小部分的数据显示，如用户注册过程，用户需要输ID，但对于新注册的用户来说，必须验证该ID是否为合法，判断是否已经被其他用户所使用，这时却不得不将整个表单提交，并在服务器端处理整个页面并回传，这极大地浪费了宝贵的服务器资源。

借助于AJAX技术，我们有了一种新的选择，我们只回传用户注册ID这个信息，可能这个信息只包含几个字节，返回时我们也只返回是否可用这个信息，返回结果也只包含一个状态位，通过AJAXengine改变页面并显示数据，在服务端只是执行了一个简单的业务逻辑，并没有处理页面显示回传的问题，这样对于服务端来说减少了大量的处理压力。

四、AJAX的缺点分析

事物都会有它的两面性，既然AJAX有着那么多优势，相应地它也会有很多不足之处，相信随着AJAX技术的发展，这些不足会逐渐消失。

1.增加第一次传输的网络负载

基于AJAX技术的Web异步交互系统比于传统的模式的系统需要增加第一次传输的网络负载。AJAX需要将AJAX引擎传输到客户端，这一步将增加网站进行时的数据传输量，相对传统的模式会有一定的理论时间差。

2.AJAX取消了back按钮，即对浏览器后退机制的破坏

后退按钮是一个标准的Web站点的重要功能，但是它没法和js进行很好的合作，这是AJAX所带来的一个比较严重的问题。作为一个WEB的用户，我们已经习惯了有back按钮，这几乎是每个用户共同的习惯，AJAX下点击链接是不Redirect页面，所以不存在后退和前进了，同样，没有后退和前进也就无法找浏览历史纪录了。在动态更新页面的情况下，用户无法回到前一个页面状态，这是因为浏览器仅能记下历史记录中的静态页面。一个被完整读入的页面与一个已经被动态修改过的页面之间的差别非常微妙；用户通常都希望单击后退按钮，就能够取消他们的前一次操作，但是在AJAX应用程序中，却无法这样做。不过开发者已想出了种种办法来解决这个问题，当中大多数都是在用户单击后退按钮访问历史记录时，通过建立或使用一个隐藏的IFRAME来重现页面上的变更。

3.查询返回大量的数据的时候不适宜用AJAX

如果数据的查询返回，数据量较大时，AJAX就不适宜用了。

4.安全性不高

暴露服务端，有可能被恶意攻击、篡改，造成安全上的漏洞。

图1 传统的Web应用程序模型

图2 基于AJAX的Web应用模型

［1］郭郑州，崔程，郝军启.ASP.NET+Ajax网站开发典型实例［M］.北京：电子工业出版社，2008.

［2］张桂元，贾燕凤，姜波.征服Ajax——Web2.0快速入门与项目实践（Java）［M］.北京：人民邮电出版社，2006.

［3］Cbristian wenz.ASP.NET AJAX 编程指南［M］.唐学韬等，译.北京：机械工业出版社，2008.

TP

A

1673-0046（2011）05-0166-03