AJAX及其应用

摘要：Web应用所提供的体验和用户从桌面应用程序所得到的体验在响应速度、易用性等方面存在着巨大的差距，为了改善Web应用程序给用户带来的体验，IT界引出了Ajax这个新名词。文章简要介绍了Web 2．0 的Ajax技术的基础理论，就其关键技术中的XMLHttpRequest对象作了重点分析，并对Ajax技术的优缺点及 其应用作了探讨，展示了Ajax所以能给用户带来更为强大的Web体验的实质。

关键词：Ajax；XMLHttpRequest；实例应用

一、Ajax简介

AJAX不是一个新的编程语言，而是对前端和后端进行数据、文本传递的一种技术。

通过与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。

这意味着可以在不重新加载整个网页的情况下，对网页进行部分更新。

二、Ajax工作原理

Ajax的工作原理相当于在用户和服务器之间加了—个中间层(AJAX引擎)，使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器。像—些数据验证和数据处理等都交给Ajax引擎自己来做,，只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。

三、XMLHttpRequest对象的属性和方法

Ajax的最大特点是无刷新更新页面，这一特点主要得益于XMLHTTP组件的XMLHttpRequest对象。 在使用XMLHttpRequest对象发送请求和处理响应之前，必须先使用JavaScript创建一个XMLHttpRequest 对象。代码清单l给出了编写跨浏览器的JavaScript代码来创建XMLHttpRequest对象的示例。

1.1 XMLHttpRequest 对象的三个常用的属性

1.1.1status 和 statusText

status 属性表示 HTTP 响应状态码，如 200、302、400等。

statusText 属性表示 HTTP响应状态的描述文本，如 OK、Not Found等。

注意，在 xhr.onload 事件中，不能简单的判断 xhr.status === 200，因为 20x、304等 HTTP 状态码也被认为是请求成功。

参考以下代码：

xhr.onload = function () {

//如果请求成功

if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){

//do successCallback

}

}

1.1.2. readyState 属性

readyState 属性存有服务器响应的状态信息。每当 readyState 改变时，onreadystatechange 函数就会被执行。

readyState 属性可能的值：

状态	描述
0	请求未初始化（在调用 open() 之前）
1	请求已提出（调用 send() 之前）
2	请求已发送（这里通常可以从响应得到内容头部）
3	请求处理中（响应中通常有部分数据可用，但是服务器还没有完成响应）
4	请求已完成（可以访问服务器响应并使用它）

我们要向这个 onreadystatechange 函数添加一条 If 语句，来测试我们的响应是否已完成(意味着可获得数据)：

1. 1. xmlHttp.onreadystatechange = function() {

2. 2. if (xmlHttp.readyState == 4) {

3. 3. //从服务器的response获得数据

4. 4. }

5. 5. }

1.1.3. responseText 属性

可以通过 responseText 属性来取回由服务器返回的数据。

在我们的代码中，我们将把时间文本框的值设置为等于 responseText：

1. 1. xmlHttp.onreadystatechange = function() {

2. 2. if (xmlHttp.readyState == 4) {

3. 3. document.myForm.time.value = xmlHttp.responseText;

4. 4. }

2.1.XMLHttpRequest 对象的两个常用的方法

2.1.1. open() 方法

open()有三个参数。第一个参数定义发送请求所使用的方法，第二个参数规定服务器端脚本的URL，第三个参数规定应当对请求进行异步地处理。

xmlHttp.open("GET","test.php",true);

2.1.2.send() 方法

send()方法将请求送往服务器。如果我们假设 HTML 文件和 PHP 文件位于相同的目录，那么代码是这样的：

xmlHttp.send(null);

其它方法如下：

四、事件处理程序

请求正常时，事件触发顺序

1. 触发 xhr.onreadystatechange (之后每次 readyState 变化时，都会触发一次)

2. 触发 xhr.onloadstart //上传阶段开始：

3. 触发 xhr.upload.onloadstart

4. 触发 xhr.upload.onprogress

5. 触发 xhr.upload.onload

6. 触发 xhr.upload.onloadend //上传结束，下载阶段开始：

7. 触发 xhr.onprogress

8. 触发 xhr.onload

9. 触发 xhr.onloadend

发生 abort / timeout / error 时事件触发顺序

1. 触发 xhr.onreadystatechange 事件，此时 readystate 为 4

2. 如果上传阶段还没有结束，则依次触发以下事件：

1. xhr.upload.onprogress

2. xhr.upload.[onabort或ontimeout或onerror]

3. xhr.upload.onloadend

3. 触发 xhr.onprogress 事件

4. 触发 xhr.[onabort或ontimeout或onerror] 事件

5. 触发 xhr.onloadend 事件

五、Ajax实例应用

下面的例子是一个关于级联菜单方面的Ajax应用。

对级联菜单的传统处理是： 为了避免每次对菜单的操作都要重载页面，一次性将级联菜单的所有数据全部读取出来并写入数组，然后根据用户的操作用JavaScnpt来控制它的子集项目的呈现。这虽然解决了操作响应速度慢、重载页面以及向服 务器频繁发送请求的问题，但是如果用户不对菜单进行操作或只对菜单中的一部分进行操作的话，那么读取的数据中的一部分就会成为冗余数据源，特别是在菜单结构复杂、数据量大的情况下(比如菜单有很多级、每 一级菜单又有上百个项目)，这种弊端就更为突出。 在此案例中应用Ajax后，情况将不同： 在初始化页面时只读出它的第一级的所有数据并显示，在用户操作一级菜单的其中一项时，会通过Ajax向后 台请求当前一级项目所属的二级子菜单的所有数据，如果再继续请求已经呈现的二级菜单中的一项时，再向 后面请求所操作二级菜单项对应的所有三级菜单的所有数据，依此类推……，这样，用什么就取什么、用多少取多少，就不会有数据的冗余和浪费，减少了数据下载总量，而且更新页面时不用重载全部内容，只更新需要更新的那部分即可，相对于后台处理并重载的方式缩短了用户的等待时间，也把对资源的浪费降到最低。

此外，Ajax可以调用外部数据，可以实现数据聚合的功能(当然要有相应授权)，比如微软的在线RSS阅读器； 还可以利用一些开放的数据，开发自己的一些应用程序，比如用Amazon的数据作一些新颖的图书搜索应 用。

可见，Ajax适用于交互较多，频繁读数据，数据分类良好的Web应用

六、结束语

Ajax的成功之处在于使用验证过的现有技术使得Web应用更像是一个桌面应用程序，减少了用户的等待时 间，提升了用户的浏览体验。Ajax在任何标准浏览器(可以处理JavaScfipt和DOM的浏览器)中都可以正常工 作，不需要单独安装其他插件。