浅析AJ AX开发技术

宋鹏

【摘 要】介绍了一种网站交互方式技术AJAX，对 AJAX 开发技术基本原理进行了探讨，最后列出一个初步的AJAX开发框架示例方便读者开发实用的W EB 应用程序。

【关键词】AJAX技术；异步通信；W EB；AJAX开发框架

一、AJAX介绍

AJAX全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。AJAX技术是目前在浏览器中通过JavaScript脚本可以使用的所有技术的集合。AJAX以一种崭新的方式来使用所有的这些技术，使得传统的B/S方式的Web开发焕发了新的活力。

传统的 Web 应用采用同步交互过程，用户首先向 HTTP 服务器触发一个行为或请求的呼求。反过来，服务器执行某些任务，再向发出请求的用户返回一个HTML页面。这是一种不连贯的用户体验，服务器在处理请求的时候，用户多数时间处于等待的状态，屏幕内容也是一片空白。

自从采用超文本作为 Web 传输和呈现之后，我们都是采用这一套传输方式。当负载比较小的时候，这并不会体现出有什么不妥。可是当负载比较大，响应时间要很长，这种等待就不可忍受了。严重的，超过响应时间，服务器干脆告诉你页面不可用。另外，某些时候，我只是想改变页面一小部分的数据，我们必须重新加载整个页面。当软件设计越来越讲究人性化的时候，这么糟糕的用户体验简直与这种原则背道而驰。要让用户不用老是等待服务器取数据，至少，我们应该减少用户等待的时间。现在，除了程序设计、编码优化和服务器调优之外，还可以采用 AJAX。

与传统的 Web 应用不同，AJAX 采用异步交互过程。AJAX在用户与服务器之间引入一个中间媒介，从而消除了网络交互过程中的处理—等待—处理—等待缺点。用户的浏览器在执行任务时即装载了AJAX 引擎。AJAX引擎用JavaScript语言编写，通常藏在一个隐藏的框架中。它负责编译用户界面及与服务器之间的交互。AJAX 引擎允许用户与应用软件之间的交互过程异步进行，独立于用户与网络服务器间的交流。现在，可以用Javascript 调用AJAX引擎来代替产生一个 HTTP 的用户动作，内存中的数据编辑、页面导航、数据校验这些不需要重新载入整个页面的需求可以交给 AJAX 来执行。

二、AJAX 开发框架

AJAX实质上也是遵循 Request/Server 模式，所以这个框架基本的流程也是：对象初始化- >发送请求- >服务器接收- >服务器返回- >客户端接收- >修改客户端页面内容。只不过这个过程是异步的。

1、初始化对象并发出 XMLHttpRequest 请求

为了让Javascript 可以向服务器发送 HTTP 请求，必须使用XMLHttpRequest 对象。使用之前，要先将 XMLHttpRequest 对象实例化。之前说过，各个浏览器对这个实例化过程实现不同。IE 以ActiveX 控件的形式提供，而Mozilla 等浏览器则直接以XMLHttpRequest 类的形式提供。为了让编写的程序能够跨浏览器运行，要这样写：

if （window.XMLHttpRequest）

{ // Mozilla， Safari， ...

http_request = new XMLHttpRequest（）；

}

else if （window.ActiveXObject）

{ // IE

http_request = new ActiveXObject（"Microsoft.XMLHTTP"）； }

有些版本的Mozilla 浏览器处理服务器返回的未包含 XML mime- type 头部信息的内容时会出错。因此，要确保返回的内容包含 text/xml 信息。

http_request = new XMLHttpRequest（）；

http_request.overrideMimeType（text/xml）；

2、指定响应处理函数

接下来要指定当服务器返回信息时客户端的处理方式。只要将相应的处理函数名称赋给XMLHttpRequest对象的onreadystatechange属性就可以了。

比如：http_request.onreadystatechange = processRequest；需要指出的时，这个函数名称不加括号，不指定参数。也可以用Javascript 即时定义函数的方式定义响应函数。比如：http_request. onreadystatechange = function（） {}；

3、发出HTTP请求

指定响应处理函数之后，就可以向服务器发出HTTP请求了。这一步调用XMLHttpRequest对象的open和send方法。

http_request.open（GET， http：//www.example.org/some.file， true）；

http_request.send（null）；

open 的第一個参数是 HTTP 请求的方法，为 Get、Post 或者Head。

open 的第二个参数是目标URL。基于安全考虑，这个URL只能是同网域的，否则会提示“没有权限”的错误。这个URL可以是任何的URL，包括需要服务器解释执行的页面，不仅仅是静态页面。目标URL处理请求XMLHttpRequest请求则跟处理普通的HTTP 请求一样，比如ASP可以用request （""）来取得 URL 参数值。

open的第三个参数只是指定在等待服务器返回信息的时间内是否继续执行下面的代码。如果为True，则不会继续执行，直到服务器返回信息。默认为True。

按照顺序，open 调用完毕之后要调用 send 方法。send 的参数如果是以 Post 方式发出的话，可以是任何想传给服务器的内容。不过，跟 form 一样，如果要传文件或者 Post 内容给服务器，必须先调用 setRequestHeader 方法，修改 MIME 类别。如下：

http_request.setRequestHeader（"Content- Type"，"application/ x- www- form- urlencoded "）；

这时资料则以查询字符串的形式列出，作为send参数。

例如： name=value&realname=other

4、处理服务器返回的信息

在第二步我们已经指定了响应处理函数，这一步，来看看这个响应处理函数都应该做什么。

首先，它要检查 XMLHttpRequest 对象的 readyState 值，判断请求目前的状态。参照前文的属性表可以知道，readyState 值为 4的时候，代表服务器已经传回所有的信息，可以开始处理信息并更新页面内容了。如下：if （http_request.readyState == 4） {//信息已经返回，可以开始处理} else {//信息还没有返回，等待}

服务器返回信息后，还需要判断返回的HTTP状态码，确定返回的页面没有错误。所有的状态码都可以在W3C的官方网站上查到。其中，200 代表页面正常。

if （http_request.status == 200） {//页面正常，可以开始处理信息} else {//页面有问题}

XMLHttpRequest 对成功返回的信息有两种处理方式：

responseText：将传回的信息当字符串使用；

responseXML：将传回的信息当 XML 文档使用，可以用 DOM处理。

5、一个初步的开发框架示例

下面为一个可用的开发框架，将服务器返回的信息用弹出提示框的形式显示出来：

三、使用 AJAX的一些优点

1、减轻服务器的负担。AJAX的原则是“按需取数据”，可以最大程度的减少冗余请求及响应对服务器造成的负担。

2、无刷新更新页面，减少用户心理和实际的等待时间。特别的，当要读取大量的数据的时候，不用像重新装载那样出现白屏的情况，AJAX 使用 XMLHTTP 对象发送请求并得到服务器响应，在不重新载入整个页面的情况下用 Javascript 操作 DOM 最终更新页面。所以在读取数据的过程中，用户所面对的不是白屏，是原来的页面内容（也可以加一个Loading...的提示框让用户知道处于读取数据过程），只有当数据接收完毕之后才更新相应部分的内容。这种更新是瞬间的，用户几乎感觉不到。

3、带来更好的用户体验。可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。可以调用外部数据。基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。进一步促进页面呈现和数据的分离。

四、使用 AJAX的一些缺陷

1、AJAX 大量使用了 Javascript 和 AJAX 引擎，而这个取决于浏览器的支持。IE5.0及以上、Mozilla1.0、NetScape7及以上版本才支持，Mozilla雖然也支持AJAX，但是提供XMLHttpRequest 的方式不一样。所以，使用 AJAX 的程序必须测试针对各个浏览器的兼容性。

2、AJAX 更新页面内容的时候并没有刷新整个页面，因此，网页的后退功能是失效的；有的用户还经常搞不清楚现在的数据是旧的还是已经更新过的。这个就需要在明显位置提醒用户“数据已更新”。

3、对流媒体的支持没有 FLASH、Java Applet 好。

4、一些手持设备（如手机、PDA 等）现在还不能很好的支持Ajax。

使用AJAX技术的这些缺陷在本系统没有什么大的麻烦，只要多做处判断与处理即可解决。