21.Ajax 与Comet（1）

Ajax 与Comet：2005 年，Jesse James Garrett 发表了一篇在线文章，题为“Ajax: A new Approach to WebApplications”（http://www.adaptivepath.com/ideas/essays/archives/000385.php）。他在这篇文章里介绍了一种技术，用他的话说，就叫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 开发人员必须掌握的一种技能。

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 之前的版本
function createXHR(){
	if (typeof arguments.callee.activeXString != "string"){
		var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"],
		i, len;
		for (i=0,len=versions.length; i < len; i++){
			try {
				new ActiveXObject(versions[i]);
				arguments.callee.activeXString = versions[i];
				break;
			} catch (ex){
				//跳过
			}
		}
	}
	return new ActiveXObject(arguments.callee.activeXString);
}

这个函数会尽力根据IE 中可用的MSXML 库的情况创建最新版本的XHR 对象。

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

var xhr = new XMLHttpRequest();

假如你只想支持IE7 及更高版本，那么大可丢掉前面定义的那个函数，而只用原生的XHR 实现。但是，如果你必须还要支持IE 的早期版本，那么则可以在这个createXHR()函数中加入对原生XHR对象的支持。

function createXHR(){
	if (typeof XMLHttpRequest != "undefined"){
		return new XMLHttpRequest();
	} else if (typeof ActiveXObject != "undefined"){
		if (typeof arguments.callee.activeXString != "string"){
			var versions = [ "MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"],
			i, len;
			for (i=0,len=versions.length; i < len; i++){
				try {
					new ActiveXObject(versions[i]);
					arguments.callee.activeXString = versions[i];
					break;
				} catch (ex){
					//跳过
				}
			}
		}
		return new ActiveXObject(arguments.callee.activeXString);
	} else {
		throw new Error("No XHR object available.");
	}
}

这个函数中新增的代码首先检测原生XHR 对象是否存在，如果存在则返回它的新实例。如果原生对象不存在，则检测ActiveX 对象。如果这两种对象都不存在，就抛出一个错误。然后，就可以使用下面的代码在所有浏览器中创建XHR 对象了。

var xhr = createXHR();

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

• XHR的用法：

在使用XHR 对象时，要调用的第一个方法是open()，它接受3 个参数：要发送的请求的类型（"get"、"post"等）、请求的URL 和表示是否异步发送请求的布尔值。下面就是调用这个方法的例子。

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

这行代码会启动一个针对example.php 的GET 请求。有关这行代码，需要说明两点：一是URL相对于执行代码的当前页面（当然也可以使用绝对路径）；二是调用open()方法并不会真正发送请求，而只是启动一个请求以备发送。

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

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

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

这里的send()方法接收一个参数，即要作为请求主体发送的数据。如果不需要通过请求主体发送数据，则必须传入null，因为这个参数对有些浏览器来说是必需的。调用send()之后，请求就会被分派到服务器。

由于这次请求是同步的，JavaScript 代码会等到服务器响应之后再继续执行。在收到响应后，响应的数据会自动填充XHR 对象的属性，相关的属性简介如下。

1. responseText：作为响应主体被返回的文本。
2. responseXML：如果响应的内容类型是"text/xml"或"application/xml"，这个属性中将保存包含着响应数据的XML DOM 文档。
3. status：响应的HTTP 状态。
4. 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。

有的浏览器会错误地报告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 对象本身来确定下一步该怎么做。

这个例子在onreadystatechange 事件处理程序中使用了xhr 对象，没有使用this 对象，原因是onreadystatechange 事件处理程序的作用域问题。如果使用this 对象，在有的浏览器中会导致函数执行失败，或者导致错误发生。因此，使用实际的XHR 对象实例变量是较为可靠的一种方式。

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

xhr.abort();

调用这个方法后，XHR 对象会停止触发事件，而且也不再允许访问任何与响应有关的对象属性。在终止请求之后，还应该对XHR 对象进行解引用操作。由于内存原因，不建议重用XHR 对象。

• HTTP头部信息：

每个HTTP 请求和响应都会带有相应的头部信息，其中有的对开发人员有用，有的也没有什么用。XHR 对象也提供了操作这两种头部（即请求头部和响应头部）信息的方法。

默认情况下，在发送XHR 请求的同时，还会发送下列头部信息。

1. Accept：浏览器能够处理的内容类型。
2. Accept-Charset：浏览器能够显示的字符集。
3. Accept-Encoding：浏览器能够处理的压缩编码。
4. Accept-Language：浏览器当前设置的语言。
5. Connection：浏览器与服务器之间连接的类型。
6. Cookie：当前页面设置的任何Cookie。
7. Host：发出请求的页面所在的域 。
8. Referer：发出请求的页面的URI。注意，HTTP 规范将这个头部字段拼写错了，而为保证与规范一致，也只能将错就错了。（这个英文单词的正确拼法应该是referrer。）
9. User-Agent：浏览器的用户代理字符串。

虽然不同浏览器实际发送的头部信息会有所不同，但以上列出的基本上是所有浏览器都会发送的。使用setRequestHeader()方法可以设置自定义的请求头部信息。这个方法接受两个参数：头部字段的名称和头部字段的值。要成功发送请求头部信息，必须在调用open()方法之后且调用send()方法之前调用setRequestHeader()，如下面的例子所示。

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.php", true);
xhr.setRequestHeader("MyHeader", "MyValue");
xhr.send(null);

服务器在接收到这种自定义的头部信息之后，可以执行相应的后续操作。我们建议读者使用自定义的头部字段名称，不要使用浏览器正常发送的字段名称，否则有可能会影响服务器的响应。有的浏览器允许开发人员重写默认的头部信息，但有的浏览器则不允许这样做。

调用XHR 对象的getResponseHeader()方法并传入头部字段名称，可以取得相应的响应头部信息。而调用getAllResponseHeaders()方法则可以取得一个包含所有头部信息的长字符串。来看下面的例子。

var myHeader = xhr.getResponseHeader("MyHeader");
var allHeaders = xhr.getAllResponseHeaders();

在服务器端，也可以利用头部信息向浏览器发送额外的、结构化的数据。在没有自定义信息的情况下，getAllResponseHeaders()方法通常会返回如下所示的多行文本内容：

Date: Sun, 14 Nov 2004 18:04:03 GMT
Server: Apache/1.3.29 (Unix)
Vary: Accept
X-Powered-By: PHP/4.3.8
Connection: close
Content-Type: text/html; charset=iso-8859-1

这种格式化的输出可以方便我们检查响应中所有头部字段的名称，而不必一个一个地检查某个字段是否存在。

• GET请求：GET 是最常见的请求类型，最常用于向服务器查询某些信息。必要时，可以将查询字符串参数追加到URL 的末尾，以便将信息发送给服务器。对XHR 而言，位于传入open()方法的URL 末尾的查询字符串必须经过正确的编码才行。

使用GET 请求经常会发生的一个错误，就是查询字符串的格式有问题。查询字符串中每个参数的名称和值都必须使用encodeURIComponent()进行编码，然后才能放到URL 的末尾；而且所有名-值对儿都必须由和号（&）分隔，如下面的例子所示。

xhr.open("get", "example.php?name1=value1&name2=value2", true);

下面这个函数可以辅助向现有URL 的末尾添加查询字符串参数：

function addURLParam(url, name, value) {
	url += (url.indexOf("?") == -1 ? "?" : "&");
	url += encodeURIComponent(name) + "=" + encodeURIComponent(value);
	return url;
}

这个addURLParam()函数接受三个参数：要添加参数的URL、参数的名称和参数的值。这个函数首先检查URL 是否包含问号（以确定是否已经有参数存在）。如果没有，就添加一个问号；否则，就添加一个和号。然后，将参数名称和值进行编码，再添加到URL 的末尾。最后返回添加参数之后的URL。

下面是使用这个函数来构建请求URL 的示例。

var url = "example.php";
//添加参数
url = addURLParam(url, "name", "Nicholas");
url = addURLParam(url, "book", "Professional JavaScript");
//初始化请求
xhr.open("get", url, false);

在这里使用addURLParam()函数可以确保查询字符串的格式良好，并可靠地用于XHR 对象。

• POST请求：

使用频率仅次于GET 的是POST 请求，通常用于向服务器发送应该被保存的数据。POST 请求应该把数据作为请求的主体提交，而GET 请求传统上不是这样。POST 请求的主体可以包含非常多的数据，而且格式不限。在open()方法第一个参数的位置传入"post"，就可以初始化一个POST 请求，如下面的例子所示。

xhr.open("post", "example.php", true);

发送POST 请求的第二步就是向send()方法中传入某些数据。由于XHR 最初的设计主要是为了处理XML，因此可以在此传入XML DOM 文档，传入的文档经序列化之后将作为请求主体被提交到服务器。当然，也可以在此传入任何想发送到服务器的字符串。

默认情况下，服务器对POST 请求和提交Web 表单的请求并不会一视同仁。因此，服务器端必须有程序来读取发送过来的原始数据，并从中解析出有用的部分。不过，我们可以使用XHR 来模仿表单提交：首先将Content-Type 头部信息设置为application/x-www-form-urlencoded，也就是表单提交时的内容类型，其次是以适当的格式创建一个字符串POST 数据的格式与查询字符串格式相同。如果需要将页面中表单的数据进行序列化，然后再通过XHR 发送到服务器，那么就可以使用serialize()函数来创建这个字符串：

function submitData(){
	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("post", "postexample.php", true);
	xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	var form = document.getElementById("user-info");
	xhr.send(serialize(form));
}

这个函数可以将ID 为"user-info"的表单中的数据序列化之后发送给服务器。而下面的示例PHP文件postexample.php 就可以通过$_POST 取得提交的数据了：

<?php
	header("Content-Type: text/plain");
	echo <<<EOF
	Name: {$_POST[‘user-name’]}
	Email: {$_POST[‘user-email’]}
	EOF;
?>

如果不设置Content-Type 头部信息，那么发送给服务器的数据就不会出现在$_POST 超级全局变量中。这时候，要访问同样的数据，就必须借助$HTTP_RAW_POST_DATA。

与GET 请求相比，POST 请求消耗的资源会更多一些。从性能角度来看，以发送相同的数据计，GET 请求的速度最多可达到POST 请求的两倍。

2.XMLHttpRequest 2 级：鉴于XHR 已经得到广泛接受，成为了事实标准，W3C 也着手制定相应的标准以规范其行为。XMLHttpRequest 1 级只是把已有的XHR 对象的实现细节描述了出来。而XMLHttpRequest 2 级则进一步发展了XHR。并非所有浏览器都完整地实现了XMLHttpRequest 2 级规范，但所有浏览器都实现了它规定的部分内容。

• FormData：现代Web 应用中频繁使用的一项功能就是表单数据的序列化，XMLHttpRequest 2 级为此定义了FormData 类型。FormData 为序列化表单以及创建与表单格式相同的数据（用于通过XHR 传输）提供了便利。下面的代码创建了一个FormData 对象，并向其中添加了一些数据。

var data = new FormData();
data.append("name", "Nicholas");

这个append()方法接收两个参数：键和值，分别对应表单字段的名字和字段中包含的值。可以像这样添加任意多个键值对儿。而通过向FormData 构造函数中传入表单元素，也可以用表单元素的数据预先向其中填入键值对儿：

var data = new FormData(document.forms[0]);

创建了FormData 的实例后，可以将它直接传给XHR 的send()方法，如下所示：

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("post","postexample.php", true);
var form = document.getElementById("user-info");
xhr.send(new FormData(form));

使用FormData 的方便之处体现在不必明确地在XHR 对象上设置请求头部。XHR 对象能够识别传入的数据类型是FormData 的实例，并配置适当的头部信息。

支持FormData 的浏览器有Firefox 4+、Safari 5+、Chrome 和Android 3+版WebKit。

• 超时设定：

IE8 为XHR 对象添加了一个timeout 属性，表示请求在等待响应多少毫秒之后就终止。在给timeout 设置一个数值后，如果在规定的时间内浏览器还没有接收到响应，那么就会触发timeout 事件，进而会调用ontimeout 事件处理程序。这项功能后来也被收入了XMLHttpRequest 2 级规范中。来看下面的例子。

var xhr = createXHR();
xhr.onreadystatechange = function(){
	if (xhr.readyState == 4){
		try {
			if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
				alert(xhr.responseText);
			} else {
				alert("Request was unsuccessful: " + xhr.status);
			}
		} catch (ex){
			//假设由ontimeout 事件处理程序处理
		}
	}
};
xhr.open("get", "timeout.php", true);
xhr.timeout = 1000; //将超时设置为1 秒钟（仅适用于IE8+）
xhr.ontimeout = function(){
	alert("Request did not return in a second.");
};
xhr.send(null);

这个例子示范了如何使用timeout 属性。将这个属性设置为1000 毫秒，意味着如果请求在1 秒钟内还没有返回，就会自动终止。请求终止时，会调用ontimeout 事件处理程序。但此时readyState可能已经改变为4 了，这意味着会调用onreadystatechange 事件处理程序。可是，如果在超时终止请求之后再访问status 属性，就会导致错误。为避免浏览器报告错误，可以将检查status 属性的语句封装在一个try-catch 语句当中。

在写作本书时，IE 8+仍然是唯一支持超时设定的浏览器。

• overrideMimeType()方法：

Firefox 最早引入了overrideMimeType()方法，用于重写XHR 响应的MIME 类型。这个方法后来也被纳入了XMLHttpRequest 2 级规范。因为返回响应的MIME 类型决定了XHR 对象如何处理它，所以提供一种方法能够重写服务器返回的MIME 类型是很有用的。

比如，服务器返回的MIME 类型是text/plain，但数据中实际包含的是XML。根据MIME 类型，即使数据是XML，responseXML 属性中仍然是null。通过调用overrideMimeType()方法，可以保证把响应当作XML 而非纯文本来处理。

var xhr = createXHR();
xhr.open("get", "text.php", true);
xhr.overrideMimeType("text/xml");
xhr.send(null);

这个例子强迫XHR 对象将响应当作XML 而非纯文本来处理。调用overrideMimeType()必须在send()方法之前，才能保证重写响应的MIME 类型。

支持overrideMimeType()方法的浏览器有Firefox、Safari 4+、Opera 10.5 和Chrome。

3.进度事件：Progress Events 规范是W3C 的一个工作草案，定义了与客户端服务器通信有关的事件。这些事件最早其实只针对XHR 操作，但目前也被其他API 借鉴。有以下6 个进度事件。

1. loadstart：在接收到响应数据的第一个字节时触发。
2. progress：在接收响应期间持续不断地触发。
3. error：在请求发生错误时触发。
4. abort：在因为调用abort()方法而终止连接时触发。
5. load：在接收到完整的响应数据时触发。
6. loadend：在通信完成或者触发error、abort 或load 事件后触发。

每个请求都从触发loadstart 事件开始，接下来是一或多个progress 事件，然后触发error、abort 或load 事件中的一个，最后以触发loadend 事件结束。

支持前5 个事件的浏览器有Firefox 3.5+、Safari 4+、Chrome、iOS 版Safari 和Android 版WebKit。Opera（从第11 版开始）、IE 8+只支持load 事件。目前还没有浏览器支持loadend 事件。

这些事件大都很直观，但其中两个事件有一些细节需要注意。

• load事件：

Firefox 在实现XHR 对象的某个版本时，曾致力于简化异步交互模型。最终，Firefox 实现中引入了load 事件，用以替代readystatechange 事件。响应接收完毕后将触发load 事件，因此也就没有必要去检查readyState 属性了。而onload 事件处理程序会接收到一个event 对象，其target 属性就指向XHR 对象实例，因而可以访问到XHR 对象的所有方法和属性。然而，并非所有浏览器都为这个事件实现了适当的事件对象。结果，开发人员还是要像下面这样被迫使用XHR 对象变量。

var xhr = createXHR();
xhr.onload = function(){
    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
        alert(xhr.responseText);
    } else {
        alert("Request was unsuccessful: " + xhr.status);
    }
};
xhr.open("get", "altevents.php", true);
xhr.send(null);

只要浏览器接收到服务器的响应，不管其状态如何，都会触发load 事件。而这意味着你必须要检查status 属性，才能确定数据是否真的已经可用了。Firefox、Opera、Chrome 和Safari 都支持load事件。

• progress事件：

Mozilla 对XHR 的另一个革新是添加了progress 事件，这个事件会在浏览器接收新数据期间周期性地触发。而onprogress 事件处理程序会接收到一个event 对象，其target 属性是XHR 对象，但包含着三个额外的属性：lengthComputable、position 和totalSize。其中，lengthComputable是一个表示进度信息是否可用的布尔值，position 表示已经接收的字节数，totalSize 表示根据Content-Length 响应头部确定的预期字节数。有了这些信息，我们就可以为用户创建一个进度指示器了。下面展示了为用户创建进度指示器的一个示例。

var xhr = createXHR();
xhr.onload = function(event){
	if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
		alert(xhr.responseText);
	} else {
		alert("Request was unsuccessful: " + xhr.status);
	}
};
xhr.onprogress = function(event){
	var divStatus = document.getElementById("status");
	if (event.lengthComputable){
		divStatus.innerHTML = "Received " + event.position + " of " + event.totalSize +" bytes";
	}
};
xhr.open("get", "altevents.php", true);
xhr.send(null);

为确保正常执行，必须在调用open()方法之前添加onprogress 事件处理程序。在前面的例子中，每次触发progress 事件，都会以新的状态信息更新HTML 元素的内容。如果响应头部中包含Content-Length 字段，那么也可以利用此信息来计算从响应中已经接收到的数据的百分比。