Ajax 技术研究及其Web应用

张铃丽，朱永杰

（许昌学院，河南许昌461000）

Ajax 技术研究及其Web应用

张铃丽，朱永杰

（许昌学院，河南许昌461000）

Ajax技术是多种现有技术的结合，通过浏览器与服务器之间的异步通信，实现了无刷新更新页面，提高了用户的体验.介绍了Ajax的技术原理、核心技术及工作流程，列举了Ajax技术一些典型应用，并指出Ajax的发展趋势.

Ajax；XMLHttpRequest；J avaScript；DOM；XML

随着Web应用技术的不断发展，用户已经不满足于像以前那样填写表单，点击“提交”按钮，然后等待页面跳转的同步请求/响应模式，用户需要的是一种像任何桌面应用程序那样流畅、快捷和人性化的Web体验.另外，大多数的网页具有一些相同的内容，尤其是同一网站中的网页.以往打开这些网页的时都是从服务器上全部下载到客户端，这造成了巨大的服务器的负担，其实可以采用新的技术来避免重复内容的请求.因而，Ajax技术应运而生并获得广泛应用.

Ajax是Asynchronous JavaScript and XML的缩写，是由XMLHttpRequest、CSS、XML、DOM和JavaScript等技术结合而成的技术[1].它是基于JavaScript脚本和XML封装数据的服务器和客户端的异步交互技术，能够实现浏览器与服务器的异步通信，使B/S结构的应用程序根据用户输入实现页面实时、局部、快速刷新，模拟类桌面应用程序的效果，从而不仅节省了带宽，而且显著地提高用户的体验.

1 Ajax的技术原理

传统的Web应用采用同步交互方式，用户发送一个HTTP请求到服务器，服务器对其进行处理后再返回一个新的Web页面到浏览器.当服务器正在处理的时候，用户则一直处于等待状态，这样，不会产生较好的体验，而且完整页面的传输会加重网络负荷和服务器的工作量.

Ajax是多种技术的结合，通过协作发挥各自的作用：使用XHTML和CSS标准化呈现；使用DOM实现动态显示和交互；使用XML和XSTL进行数据交换与处理；使用XMLHttp-Request对象进行异步数据读取；使用JavaScript绑定和处理所有数据[1].

图1 传统的Web模型

图2 Ajax Web模型

Ajax采用异步交互方式，在用户和服务器之间引入一个用JavaScript编写的Ajax引擎，用来代替用户与服务器进行交互[3].Ajax引擎是用JavaScript语言所编写，且通常放在一个隐藏frame中，该引擎负责绘制用户界面以及与服务器端通信[2].并不是所有的用户请求都提交给服务器，像一些数据验证和数据处理等都交给Ajax引擎来做，只有确定需要从服务器读取新数据时再由Ajax引擎向服务器提交请求，这样，把以前的一些服务器负担的工作转嫁到客户端，利用客户端闲置的处理能力来处理，减轻服务器和带宽的负担.

通过Ajax的技术原理可知，Ajax的最大特点是无刷新更新页面，减少用户心理和实际的等待时间；Ajax能够按需读取数据，避免了在网络上发送那些不发生改变的信息.但Ajax并不是完美的技术，它也有自身的缺陷.浏览器兼容性差；前进后退按钮失效；一些手持设备现在还不能很好的支持Ajax；运行效率不高；开发难度加大；对搜索引擎不太友好.

2 Ajax的核心技术

Ajax的核心技术是XMLHttpRequest、JavaScript、CSS、DOM和XML.

XMLHttpRequest是Ajax中最为核心的技术，是XMLHttp组件的一个对象，最早是由微软1995在IE5.0浏览器中率先推出的[4].它直接把数据传到服务器上或者从服务器上读取数据，实现上述所介绍无刷新更新页面的功能.与此对应，opera、Mozilla和safari等浏览器也实现了类似的对象，XMLHttpRequest是目前该技术的正式名称.XMLHttpRequest技术的出现打破了长久以来的Web应用开发模式，这样既减轻了服务器的负担又加快了响应速度、缩短了用户等待时间，提升了用户的体验.

JavaScript是一种基于对象和事件驱动并具有较高安全性能的脚本语言，拥有自己的编程标准，可以使用浏览器中的很多对象，包括XMLHttpRequest.在Ajax中，JavaScript通过调用XMLHttpRequest对象的方法和属性与服务器端进行数据交互，同时还可以利用DOM的API来解析从服务器端返回的XML数据和更新HTML页面的内容.由于JavaScript可以直接在客户端进行一些事件的处理，充分发挥了客户端的运算能力，所以就不需要将用户所提交的简单请求传到服务器处理再传回来，从而大大减轻了服务器的负担.JavaScript在客户端的浏览器执行，JavaScript代码不应太多，否则会使得客户端运行很慢，JavaScript应用最多的就是表单验证[5].

DOM是Document Object Model的缩写，即文档对象模型，为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构.它是个W3C规范，独立于平台和语言.DOM定义了如何表示和修改文档所需要的对象，也定义了这些对象的行为和属性，以及对象之间的关系.使用JavaScript可以访问文档中的所有结点，即所有对象.通过改变这些对象的属性，用户可以控制页面的局部行为，将动态获取的数据插入到文档中，实现局部刷新的目的.用户还可以利用DOM模型增加和删除文档结点，实现界面元素的动态变化.在应用Ajax技术时，可以通过DOM来解析处理XML文档和更新HTML页面的内容.

XML是Extensible Markup Language的缩写，即可扩展标记语言，可以规范地定义结构化数据，是网上传输的数据和文档符合统一标准[6].它与HTML的性质完全相同，更准确的说，XML正是从HTML转化而来，目前，已经成为Internet上数据和文档传输的标准.XML作用很大而且广为接受，它为跨平台、跨领域的应用提供了一种通信手段.在应用Ajax技术时，XMLHttpRequest对象可以选择使用XML作为与服务器端通信的数据格式.

CSS是Web设计沿用已久的部分，同样，在Ajax中，CSS担当着界面表现的重任，其重要性甚至超过了传统的Web程序设计.JavaScript通过XMLHttpRequest对象和服务器进行交互，通常获取的都是单纯的数据，不包括表现元素，如果此时使用JavaScript操作标记的属性来控制其外观，会使代码更加复杂且难以维护，使用CSS则能很好的解决这些问题.样式表可以定义一些明显的样式元素，例如颜色、边框、背景图片、透明度和大小等.此外，CSS还可以定义元素相互之间的布局及简单的交互功能.图3显示了Ajax技术的核心技术如何配合工作来完成客户端与服务器的异步操作.

3 Ajax的工作流程

Ajax实现异步请求/响应模式步骤如下：

3.1 创建XMLHttpRequest对象

在使用XMLHttpRequest对象发送请求和处理响应之前，必须先创建一个XMLHttpRequest对象.代码如下：

由于XMLHttpRequest不是一个W3C标准，Internet Explorer把XMLHttpRequest实现为一个ActiveX对象，其他浏览器（如Firefox、Safari和Opera）把它实现为一个本地JavaScript对象.由于存在这些差别，JavaScript代码中必须包含有关的逻辑，从而使用ActiveX技术或者使用本地JavaScript对象技术来创建XMLHttpRequest对象，以确保和浏览器兼容.

3.2 发出HTTP请求和回调函数

创建了XMLHttpRequest对象之后，就可以使用XMLHttpRequest对象中的open()方法和send()方法来向服务器发送请求，如下所示：

XMLHttpRequest.open(strMethod,strUrl,boolAsync,strUser, strPassword);

XMLHttpRequest.send(varBody);

open()方法的strMethod参数，字符串型，表示HTTP请求的方法，可以为POST、GET、PUT、HEAD、DELETE等；strUrl，字符串型，表示请求的URL地址，可以为绝对地址，也可以为相对地址；boolAsync，布尔型，指定此请求是否为异步方式，默认为true，如果为false，表示此次请求为同步请求模式；strUser和strPassword，字符串型，可选参数.

open调用完毕后要调用send方法，send的参数var-Body，表示通过请求发送的数据，variant型，可以是字符串，DOM树，或其它数据流.当使用GET方法提交请求，或者没有需要发送的数据时，可以send(nulll)或直接省略参数send ().

在发送请求后，还要指定回调函数.创建XMLHttpRequest对象向服务器发送一个HTTP请求后，要决定当收到服务器的响应后，需要做什么.这需要告诉XMLHttpRequest对象用哪一个函数来处理这个响应.通常把该处理函数叫做回调函数.XMLHttpRequest对象提供了onready-statechange属性来指定回调函数，例如：

XMLHttpRequest.onreadystatechange=Call-BackFunction-Name；

也可以用JavaScript即时定义函数的方式定义响应函数，例如：

XMLHttpRequest.onreadystatechange=funct-ion(){};

3.3 处理服务器返回的信息

当XMLHttpRequest对象的readyState发生变化时将触发readystatechange事件.通过将处理函数赋给XMLHttpRequest对象的onready-statechange属性，可以为该事件指定事件处理函数.如果readyState值是4，代表服务器已经返回所有的信息，可以开始处理信息并更新页面内容.服务器返回信息后，通过访问XMLHttp-Request对象的status属性来获取当前HTTP请求的状态，以此来判断请求是否成功.其中，200代表页面正常.

在XMLHttpRequest对象完成一次HTTP请求后，可以通过访问其responseText或response-XML属性来获取返回的数据.

responseText将返回的数据作为字符串格式返回，responseXML将返回的数据格式化为XML文档返回.

以XML文档方式返回的数据，需要使用DOM来解析，从中提取响应数据，DOM也提供了对页面中各个对象的读写支持，通过DOM可以方便地完成对页面内容的更新.

3.4 取消当前请求

如果需取消一个正在进行中的请求，可以调用XMLHttpRequest对象的abort方法，如下所示：

XMLHttpRequest.abort();

调用后该方法后，XMLHttpRequest对象重新回到未初始化状态.

4 Ajax技术的应用

AJAX的技术特点在于异步交互、动态更新Web页面，因此它的适用范围是交互较多、频繁读取数据的Web应用. Ajax主要可以用于数据验证、级联菜单和自动更新页面等.

在填写表单时，有些数据需要保证唯一性，如在用户注册的过程中，需要检验待注册的用户名是否唯一.传统的方法是采用window.open的弹出窗口或window.showModalDialog的对话框，两者都需要打开窗口.而Ajax采用异步方式直接将参数提交至服务器，用window.alert将服务器返回的校验信息显示出来，这样可以快速完成验证又不加重服务器的负担.

以往在网页中应用级联菜单时，一次性地将级联菜单的所有数据全部读出并写入数组，然后根据用户的操作用JavaScript来控制它的子集项目的呈现.这种方法避免了页面的刷新，但由于用户对于菜单项的单击是不均匀的，在菜单结构复杂数据量大的时候会产生相当大的冗余，造成资源的浪费.应用Ajax技术之后，在初始化页面时只读出它的第一级的所有数据并显示，在用户操作一级菜单中的某一项时，会通过Ajax向后台请求该菜单项所属的二级子菜单的所有数据，以此类推……这样，减少了数据下载总量，在真正意义上实现“按需取数据”局部更新页面.

在有些Web应用中数据更新速度很快，如聊天室的聊天记录等等.在Ajax出现之前，用户想看到最新消息必须手动刷新或者利用页面提供的定时刷新功能.而Ajax在页面加载后会通过引擎轮询服务器，查看是否有需要更新的内容.若有，只需将新数据下载，在页面上进行动态更新并给出提示.这样既避免用户手工刷新页面的不便，也不会因频繁刷新而造成资源浪费.

然而Ajax不是万能的，只有在适宜的场合才能充分发挥长处，改善系统性能和用户体验.

5 结语

Ajax技术是多种技术的结合，实现了无刷新更新页面；它将原来一些服务器端的工作利用客户端闲置的能力来处理，从而减轻服务器的负担，减少用户的等待时间，提升了用户体验.通过运用Ajax技术，可以构建更为动态和响应更灵敏的Web引用程序，用户体验逐步接近桌面应用.随着Ajax技术的成熟和各种浏览器的支持，Ajax技术将会得到更加广泛的应用.

〔1〕Asleson R.Ajax基础教程[M].北京：人民邮电出版社, 2006.

〔2〕游丽贞.Ajax引擎的原理与应用[J].微计算机信息,2006,22 (2):506-206.

〔3〕谭力,杨宗源,谢瑾奎.Ajax技术的数据响应优化[J].计算机工程,2010,36(7):52-54.

〔4〕王净,占凯.Ajax技术和Web应用[J].舰船电子工程,2009，29(11):127-131.

〔5〕奈名高,王程根,邓浩,李祎.基于Web2.0的Ajax技术的开发[J].计算机技术与发展,2007,17(5):203-206.

〔6〕吴吉义,平玲娣.Web2.0主流应用技术——Ajax性能分析[J].计算机工程与设计,2008,29(8):1913-1914,1945.

TP393

A

1673-260X（2010）11-0020-03