XMLHttpRequest对象概述
在使用XMLHttpRequest对象发送请求和处理响应之前，必须先用JavaScript创建一个XMLHttpRequest对象。由于XMLHttpRequest不是一个W3C标准，所以可以采用多种方法使用JavaScript来创建XMLHttpRequest的实例。Internet Explorer把XMLHttpRequest实现为一个ActiveX对象，其他浏览器（如Firefox、Safari和Opera）把它实现为一个本地JavaScript对象。由于存在这些差别，JavaScript代码中必须包含有关的逻辑，从而使用ActiveX技术或者使用本地JavaScript对象技术来创建XMLHttpRequest的一个实例。
检查浏览器是否提供对ActiveX对象的支持。如果浏览器支持ActiveX对象，就可以使用ActiveX来创建XMLHttpRequest对象。否则，就要使用本地JavaScript对象技术来创建。代码清单2-1展示了编写跨浏览器的JavaScript代码来创建XMLHttpRequest对象实例是多么简单。
代码清单2-1创建XMLHttpRequest对象的一个实例
2 function createXMLHttpRequest() {
3 if (window.ActiveXObject) {
4 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
5 }
6 else if (window.XMLHttpRequest) {
7 xmlHttp = new XMLHttpRequest();
8 }
9 }
10
首先，要创建一个全局作用域变量xmlHttp来保存这个对象的引用。createXMLHttpRequest方法完成创建XMLHttpRequest实例的具体工作。这个方法中只有简单的分支逻辑（选择逻辑）来确定如何创建对象。对window.ActiveXObject的调用会返回一个对象，也可能返回null，if语句会把调用返回的结果看作是true或false（如果返回对象则为true，返回null则为false），以此指示浏览器是否支持ActiveX控件，相应地得知浏览器是不是Internet Explorer。如果确实是，则通过实例化ActiveXObject的一个新实例来创建XMLHttpRequest对象，并传入一个串指示要创建何种类型的ActiveX对象。在这个例子中，为构造函数提供的字符串是Microsoft.XMLHTTP，这说明你想创建XMLHttpRequest的一个实例。
如果window.ActiveXObject调用失败（返回null），JavaScript就会转到else语句分支，确定浏览器是否把XMLHttpRequest实现为一个本地JavaScript对象。如果存在window.
XMLHttpRequest，就会创建XMLHttpRequest的一个实例。
由于JavaScript具有动态类型特性，而且XMLHttpRequest在不同浏览器上的实现是兼容的，所以可以用同样的方式访问XMLHttpRequest实例的属性和方法，而不论这个实例创建的方法是什么。这就大大简化了开发过程，而且在JavaScript中也不必编写特定于浏览器的逻辑。
如何向服务器发送请求，以及如何处理服务器的响应
最简单的请求是，不以查询参数或提交表单数据的形式向服务器发送任何信息。在实际中，往往都希望向服务器发送一些信息。
使用XMLHttpRequest对象发送请求的基本步骤如下：
1. 为得到XMLHttpRequest对象实例的一个引用，可以创建一个新的实例，也可以访问包含有XMLHttpRequest实例的一个变量。
2. 告诉XMLHttpRequest对象，哪个函数会处理XMLHttpRequest对象状态的改变，为此要把对象的onreadystatechange属性设置为指向JavaScript函数的指针。
3. 指定请求的属性。XMLHttpRequest对象的open()方法会指定将发出的请求。open()方法取3个参数：一个是指示所用方法（通常是GET或POST）的串；一个是表示目标资源URL的串；一个是Boolean值，指示请求是否是异步的。
4. 将请求发送给服务器。XMLHttpRequest对象的send()方法把请求发送到指定的目标资源。send()方法接受一个参数，通常是一个串或一个DOM对象。这个参数作为请求体的一部分发送到目标URL。当向send()方法提供参数时，要确保open()中指定的方法是POST。如果没有数据作为请求体的一部分被发送，则使用null。
这些步骤很直观：你需要XMLHttpRequest对象的一个实例，要告诉它如果状态有变化该怎么做，还要告诉它向哪里发送请求以及如何发送请求，最后还需要指导XMLHttpRequest发送请求。不过，除非你对C或C++很了解，否则可能不明白函数指针（function pointer）是什么意思。
函数指针与任何其他变量类似，只不过它指向的不是像串、数字、甚至对象实例之类的数据，而是指向一个函数。在JavaScript中，所有函数在内存中都编有地址，可以使用函数名引用。这就提供了很大的灵活性，可以把函数指针作为参数传递给其他函数，或者在一个对象的属性中存储函数指针。
对于XMLHttpRequest对象，onreadystatechange属性存储了回调函数的指针。当XMLHttpRequest对象的内部状态发生变化时，就会调用这个回调函数。当进行了异步调用，请求就会发出，脚本立即继续处理（在脚本继续工作之前，不必等待请求结束）。一旦发出了请求，对象的readyState属性会经过几个变化。尽管针对任何状态都可以做一些处理，不过你最感兴趣的状态可能是服务器响应结束时的状态。通过设置回调函数，就可以有效地告诉XMLHttpRequest对象：“只要响应到来，就调用这个函数来处理响应。”
简单请求的示例
第一个示例很简单。这是一个很小的HTML页面，只有一个按钮。点击这个按钮会初始化一个发至服务器的异步请求。服务器将发回一个简单的静态文本文件作为响应。在处理这个响应时，会在一个警告窗口中显示该静态文本文件的内容。代码清单2-4显示了这个HTML页面和相关的JavaScript。
代码清单2-4 simpleRequest.html页面
2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3
4 <html xmlns="http://www.w3.org/1999/xhtml">
5 <head>
6 <title>Simple XMLHttpRequest</title>
7 <script type="text/javascript">
8 var xmlHttp;
9 function createXMLHttpRequest() {
10 if (window.ActiveXObject) {
11 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
12 }
13 else if (window.XMLHttpRequest) {
14 xmlHttp = new XMLHttpRequest();
15 }
16 }
17
18 function startRequest() {
19 createXMLHttpRequest();
20 xmlHttp.onreadystatechange = handleStateChange;
21 xmlHttp.open("GET", "simpleResponse.xml", true);
22 xmlHttp.send(null);
23 }
24
25 function handleStateChange() {
26 if(xmlHttp.readyState == 4) {
27 if(xmlHttp.status == 200) {
28 alert("The server replied with: " + xmlHttp.responseText);
29 }
30 }
31 }
32 </script>
33 </head>
34
35 <body>
36 <form action="#">
37 <input type="button" value="Start Basic Asynchronous Request"
38 onclick="startRequest();"/>
39 </form>
40 </body>
41 </html>
服务器的响应文件simpleResponse.xml只有一行文本。点击HTML页面上的按钮会生成一个警告框，其中显示simpleResponse.xml文件的内容。在图2-4中可以看到分别在Internet Explorer和Firefox中显示的包含服务器响应的相同警告框。
浙公网安备 33010602011771号