第21章 Ajax 与Comet（1）

2005 年，Jesse James Garrett 发表了一篇在线文章，题为“Ajax: A new Approach to WebApplications”。他在这篇文章里

介绍了一种技术，用他的话说，就叫Ajax，是对Asynchronous JavaScript + XML 的简写。这一技术能够向服务器请求额外

的数据而无须卸载页面，会带来更好的用户体验。

Garrett 还解释了怎样使用这一技术改变自从Web 诞生以来就一直沿用的“单击，等待”的交互模式。

Ajax 技术的核心是XMLHttpRequest 对象（简称XHR），这是由微软首先引入的一个特性，其他浏览器提供商后来都提供

了相同的实现。在XHR 出现之前，Ajax 式的通信必须借助一些hack 手段来实现，大多数是使用隐藏的框架或内嵌框架。

XHR 为向服务器发送请求和解析服务器响应提供了流畅的接口。能够以异步方式从服务器取得更多信息，意味着用户单击后，

可以不必刷新页面也能取得新数据。

也就是说，可以使用XHR 对象取得新数据，然后再通过DOM 将新数据插入到页面中。另外，虽然名字中包含XML 的成分，

但Ajax 通信与数据格式无关；这种技术就是无须刷新页面即可从服务器取得数据，但不一定是XML 数据。实际上，Garrett

提到的这种技术已经存在很长时间了。在Garrett 撰写那篇文章之前，人们通常将这种技术叫做远程脚本（remote scripting），

而且早在1998 年就有人采用不同的手段实现了这种浏览器与服务器的通信。再往前推，JavaScript 需要通过Java applet 或

Flash 电影等中间层向服务器发送请求。而XHR 则将浏览器原生的通信能力提供给了开发人员，简化了实现同样操作的任务。

在重命名为Ajax 之后，大约是2005 年底2006 年初，这种浏览器与服务器的通信技术可谓红极一时。

人们对JavaScript 和Web 的全新认识，催生了很多使用原有特性的新技术和新模式。就目前来说，熟练使用XHR 对象已经

成为所有Web 开发人员必须掌握的一种技能。

--------------------------------------------------------------------------------------------------------------------------------------------------

21.1 XMLHttpRequest 对象

IE5 是第一款引入XHR 对象的浏览器。在IE5 中，XHR 对象是通过MSXML 库中的一个ActiveX对象实现的。因此，在IE 中

可能会遇到三种不同版本的XHR 对象，即MSXML2.XMLHttp、MSXML2.XMLHttp.3.0 和MXSML2.XMLHttp.6.0。

要使用MSXML 库中的XHR 对象，需要像第18章讨论创建XML 文档时一样，编写一个函数，例如：

IE7+、Firefox、Opera、Chrome 和Safari 都支持原生的XHR 对象，在这些浏览器中创建XHR 对象要像下面这样使用

XMLHttpRequest 构造函数。

IE7+、Firefox、Opera、Chrome 和Safari 都支持原生的XHR 对象，在这些浏览器中创建XHR 对象要像下面这样使

XMLHttpRequest 构造函数。

var xhr = new XMLHttpRequest();

假如你只想支持IE7 及更高版本，那么大可丢掉前面定义的那个函数，而只用原生的XHR 实现。

但是，如果你必须还要支持IE 的早期版本，那么则可以在这个createXHR()函数中加入对原生XHR对象的支持。

这个函数中新增的代码首先检测原生XHR 对象是否存在，如果存在则返回它的新实例。如果原生对象不存在，则检测ActiveX 对、

象。如果这两种对象都不存在，就抛出一个错误。然后，就可以使用下面的代码在所有浏览器中创建XHR 对象了。

var xhr = createXHR();

由于其他浏览器中对XHR 的实现与IE 最早的实现是兼容的，因此就可以在所有浏览器中都以相同方式使用上面创建的xhr 对象。

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------

21.1.1 XHR的用法

在使用XHR 对象时，要调用的第一个方法是open()，它接受3 个参数：要发送的请求的类型（"get"、"post"等）、请求的URL 和

表示是否异步发送请求的布尔值。下面就是调用这个方法的例子。

xhr.open("get", "example.php", false);

这行代码会启动一个针对example.php 的GET 请求。有关这行代码，需要说明两点：一是URL相对于执行代码的当前页面

（当然也可以使用绝对路径）；二是调用open()方法并不会真正发送请求，而只是启动一个请求以备发送。

PS：只能向同一个域中使用相同端口和协议的URL 发送请求。如果URL 与启动请求的页面有任何差别，都会引发安全错误。

要发送特定的请求，必须像下面这样调用send()方法：

xhr.open("get", "example.txt", false);

xhr.send(null);

这里的send()方法接收一个参数，即要作为请求主体发送的数据。如果不需要通过请求主体发送数据，则必须传入null，

因为这个参数对有些浏览器来说是必需的。调用send()之后，请求就会被分派到服务器。

由于这次请求是同步的，JavaScript 代码会等到服务器响应之后再继续执行。在收到响应后，响应的数据会自动填充

XHR 对象的属性，相关的属性简介如下。

• responseText：作为响应主体被返回的文本。

• responseXML：如果响应的内容类型是"text/xml"或"application/xml"，这个属性中将保存包含着响应数据的XML DOM 文档。

• status：响应的HTTP 状态。

• statusText：HTTP 状态的说明。

在接收到响应后，第一步是检查status 属性，以确定响应已经成功返回。一般来说，可以将HTTP状态代码为200 作为成功的标志。

此时，responseText 属性的内容已经就绪，而且在内容类型正确的情况下，responseXML 也应该能够访问了。此外，状态代码为

304 表示请求的资源并没有被修改，可以直接使用浏览器中缓存的版本；当然，也意味着响应是有效的。为确保接收到适当的响

应，应该像下面这样检查上述这两种状态代码：

xhr.open("get", "example.txt", false);

xhr.send(null);

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

} else {

   alert("Request was unsuccessful: " + xhr.status);

}

根据返回的状态代码，这个例子可能会显示由服务器返回的内容，也可能会显示一条错误消息。我们建议读者要通过检测status

来决定下一步的操作，不要依赖statusText，因为后者在跨浏览器使用时不太可靠。另外，无论内容类型是什么，

响应主体的内容都会保存到responseText 属性中；而对于非XML 数据而言，responseXML 属性的值将为null。

PS：有的浏览器会错误地报告204 状态代码。IE 中XHR 的ActiveX 版本会将204 设置为1223，而IE 中原生的XHR 则会将204

规范化为200。Opera 会在取得204 时报告status 的值为0。

----------------------------------------------------------------------------------------------------------------------------------------------------------------------

像前面这样发送同步请求当然没有问题，但多数情况下，我们还是要发送异步请求，才能让JavaScript 继续执行而不必等待响应。

此时，可以检测XHR 对象的readyState 属性，该属性表示请求/响应过程的当前活动阶段。这个属性可取的值如下。

0：未初始化。尚未调用open()方法。

1：启动。已经调用open()方法，但尚未调用send()方法。

2：发送。已经调用send()方法，但尚未接收到响应。

3：接收。已经接收到部分响应数据。

4：完成。已经接收到全部响应数据，而且已经可以在客户端使用了。

只要readyState 属性的值由一个值变成另一个值，都会触发一次readystatechange 事件。可以利用这个事件来检测每次状态变化后

readyState 的值。通常，我们只对readyState 值为4 的阶段感兴趣，因为这时所有数据都已经就绪。不过，必须在调用open()之前指

定onreadystatechange事件处理程序才能确保跨浏览器兼容性。下面来看一个例子。

var xhr = createXHR();

xhr.onreadystatechange = function(){
    if (xhr.readyState == 4){
        if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
            alert(xhr.responseText);
    } else {
            alert("Request was unsuccessful: " + xhr.status);
        }
    }
};

xhr.open("get", "example.txt", true);

xhr.send(null);

以上代码利用DOM 0 级方法为XHR 对象添加了事件处理程序，原因是并非所有浏览器都支持DOM 2级方法。与其他事件处理程序不

同，这里没有向onreadystatechange 事件处理程序中传递event 对象；必须通过XHR 对象本身来确定下一步该怎么做。

另外，在接收到响应之前还可以调用abort()方法来取消异步请求，如下所示：

xhr.abort();

调用这个方法后，XHR 对象会停止触发事件，而且也不再允许访问任何与响应有关的对象属性。在终止请求之后，还应该对XHR 对

象进行解引用操作。由于内存原因，不建议重用XHR 对象。