在正式开始我们的示例学习之前，还劳驾你静下心来阅读本节的基础知识，因为XMLHttpRequest组件是Ajax的核心，离开它一切都是空谈。尽管我们在互联网上能够找到无数的Ajax技术框架（包括Dreamweaver CS3提供的Spry框架），直接使用这些技术框架会很惬意，也不用关心什么是XMLHttpRequest组件之类的底层技术问题。但是它们都是在XMLHttpRequest组件基础上进行的功能封装。认识了它，你也就能够俯视庐山真面目了。

那么什么是XMLHttpRequest组件呢，它又如何工作的呢？

2.1.1  认识XMLHttpRequest组件

虽然Ajax技术流行时间还比较短暂，但是XMLHttpRequest组件的年龄可不小了。微软早在IE 5版本（1999年3月）浏览器中就以ActiveX对象的形式引入了XMLHttpRequest对象，由于当时大家并没有认识到它的可爱之处，加之其他浏览器不支持该组件，所以最初诞生的几年里除了微软在Outlook中使用该组件外基本上没有被人重视。

后来其他浏览器制造商发现这个“家伙”很有才，也纷纷在各自的浏览器内增加对XMLHttpRequest对象的支持，但是把它作为一个本地JavaScript对象来使用，而不是作为一个ActiveX外部组件实现。如今微软已在IE 7版本中把XMLHttpRequest升级为一个窗口对象的属性，可谓连升三级，由先前的外挂到现在正部级，看来你还真要好好学习哟。

幸运的是，尽管不同类型浏览器在支持XMLHttpRequest的细节略有不同，但是，所有的浏览器都提供了类似的功能，且都提供了相同的属性和方法（外部接口），这样就避免了兼容性问题（用户最害怕的问题），一想到兼容问题，相信很多读者就会不寒而栗，早期的JHTML、Javascript和CSS曾经让多少设计师煞费苦心。据悉，W3C组织正在努力标准化XMLHttpRequest对象，相信当这个标准出来之后，用户开发Ajax的日子会好过些。

了解了XMLHttpRequest组件之后，我们再看看它的工作原理。一般认为XMLHttpRequest组件就是可以使用Javascript、VbScript、JScript等脚本语言，并通过HTTP协议传送或接收XML数据或其他数据的一套API（外部函数库）。简单说，XMLHttpRequest组件能够在不刷新网页的基础上实现浏览器与服务器的通信。

用MSDN官方解释就是，XMLHttpRequest提供了客户端与HTTP服务器通讯的协议。客户端可以通过XMLHttpRequest对象向HTTP服务器发送请求并使用DOM（文档对象模型）进行处理，然后再显示响应的数据。

2.1.2  创建XMLHttpRequest对象实例

现在绝大多数浏览器都增加了对XMLHttpRequest的支持，但是在IE浏览器中主要使用ActiveXObject方式来创建XmlHttp对象，而在其他浏览器（如Firefox、Opera等）中，则需要通过Window.XMLHttpRequest来创建XMLHttpRequest对象。这为我们引用该对象增加了困难，为了兼容不同浏览器，一般可以使用下面代码来实现：

var xmlHttp;

if (window.XMLHttpRequest) { //兼容Mozilla、Safari等浏览器对象

           xmlHttp = new XMLHttpRequest();

}

else if (window.ActiveXObject) { //兼容IE浏览器

           try {

               xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); //创建Msxml2.XMLHTTP控件对象

           } catch (e) {

               try {//创建Microsoft.XMLHTTP控件对象，该控件作用为获取指定URL的内容

                   xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

               } catch (e) {}

           }

}

是不是很简单，当然对于第一次接触Ajax代码的你来说，可能感觉还是比较高深。我们简单的解释一下：在上面代码段中，首先定义一个变量xmlHttp，用来存储XMLHttpRequest对象的实例。然后使用一个条件结构，分别判断当前用户所使用的浏览器，并根据不同类型浏览器决定定义实例的方法。对于Mozilla、Safari等非IE浏览器来说，如果它们支持XMLHttpRequest对象，也就是说如果window.XMLHttpRequest为真，即存在XMLHttpRequest对象，可以使用xmlHttp = new XMLHttpRequest();方法来定义。

而对于IE浏览器来说，则支持ActiveXObject外挂组件来实现，因此我们可以使用xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");或xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");的方法来实现。也许你还不能够理解其中代码的含义，笔者建议你先不妨记住这几行代码，或者定义为代码块，因为每次都必须调用。

2.1.3  认识XMLHttpRequest对象的属性和方法

实例化对象之后，你就可以利用该对象提供的属性和方法完成HTTP的请求和响应处理了。XMLHttpRequest对象提供的属性如表2­-1所示（皆为只读属性），所提供的方法如表2-2所示。

表2-1

属性	说明
onreadystatechange	指定当readyState属性改变时的事件处理句柄
readyState	返回当前请求的状态
responseBody	返回正文信息
responseStream	以文本流的形式返回响应信息
responseText	以字符串的形式返回响应信息
responseXML	以XML数据的形式返回响应信息
status	返回当前请求的HTTP状态码
statusText	返回当前请求的响应行状态

表2-2

方法	说明
abort	取消当前请求
getAllResponseHeaders	获取响应的所有HTTP头信息
getResponseHeader	从响应信息中获取指定的HTTP头信息
open	创建一个新的HTTP请求，并指定此请求的方法、URL以及验证信息（用户名/密码）
send	发送请求到HTTP服务器并接收回应
setRequestHeader	单独指定请求的某个HTTP头信息

XMLHttpRequest对象没有事件，仅有14个成员对象，你可能一会儿就把它们全部记住，是不是很简单，当然要灵活使用它们，还需要你经过实践来学习。不过这些对象使用起来都很简单，直接调用即可，在下一节中我们将详细讲解。

2.1.4  使用XMLHttpRequest实例发送和处理请求

创建一个XMLHttpRequest对象实例之后，我们就可以使用open方法创建一个HTTP请求了，说白了就是建立一个与后台服务器程序的连接。例如：

xmlHttp.open("GET","http://localhost/deel.aspl", false);

在上面的代码中，利用open方法为xmlHttp对象实例建立了一个与后台deel.asp文件的连接。

open方法中第1个参数设置发送HTTP请求的方法。使用GET方法表示把发送的参数附加在URL后面进行传递，如果要上传大量数据可以使用POST方法（大小写不敏感）。

第2个参数用来设置要打开的服务器文件（该文件可以是任意类型的文件），一般是ASP文件，因为我们希望后台程序来处理客户端的请求。

第3个参数用来指定这个请求是否为异步请求。所谓异步就是发出请求之后，不需要等待服务器的响应，客户端同时可以继续执行其它操作。默认为true，表示异步请求。如果要发送一个同步请求，需要把这个参数设置为false。

如果连接的请求文件需要认证，在open方法的后面还应提供用户名和密码参数。

当建立连接请求之后，此时你就可以使用send方法发送请求到HTTP服务器并接收服务器的响应。send方法只有一个参数，该参数可以携带请求数据，也就是说发送给服务器的数据。

send方法虽然能够接收服务器的响应，但是如何把接收的数据读取出来，还需要responseBody、responseStream、responseText和responseXML属性来实现。下面我们用一个简单的示例来说明一下：

首先，请启动Dreamweaver CS3，并打开mysite动态站点（在第1章中定义的）。选择【窗口】|【文件】菜单命令，打开【文件】面板。在【文件】面板中新建一个文本文件（hello.txt），并在其中输入“Hello,World”字符串。

然后，新建一个静态页面（如XMLHttpRequest_1.html）。打开静态页面，切换到【代码】视图，并在任意位置（建议在头部）输入下面JavaScript脚本函数：

<script>

function startRequest() {

           var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

    xmlhttp.open("GET", " hello.txt ", true);

    xmlhttp.send(null);

           alert(xmlhttp.responseText);

}

</script>

在这个脚本函数中，我们首先实例化XMLHttpRequest对象，并把该对象赋值给变量xmlhttp。

使用open方法与刚刚新建的hello.txt文件建立连接，然后使用send方法发送请求到服务器，再从服务器接收响应的数据。上面代码在send方法中没有发送任何数据，参数为空。

接着，使用alert方法显示接收的文本信息。

最后，在页面中增加一个按钮，用来触发该函数。这时如果你预览该页面，单击其中的按钮，则会显示一个提示对话框，并显示“Hello,World”字符信息（如图2­-1所示）。

<input name="" type="button" onclick="startRequest();" value="请求服务器" />

图 2-1

此时，你可能会问了：静态网页咋能也可以与服务器进行通信并处理信息呀？一般与服务器进行通信都需要刷新页面，这里没有发现呀？呵，这一切都是XMLHttpRequest对象在后面起的作用。

我们在服务器端再新建一个XML文件（如hello.xml），然后在其中输入下面数据：

<?xml version="1.0" encoding="gb2312"?>

<the>Hello,World</the>

此时，如果再使用上面的代码来读取请求的信息就会返回如图2­-2所示的字符串。

图 2-2

因此要读取XML数据，就应该使用responseXML属性来显示。代码如下：

<script>

function startRequest() {

       var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

    xmlhttp.open("GET", "hello.xml", true);

    xmlhttp.send(null);

           alert(xmlhttp.responseXML);

}

</script>

但是如果直接使用上面的xmlhttp.responseXML属性来读取服务器响应的信息，会显示如图2­-3所示的提示信息，说明所读取的是一个对象（即拥有一定数据结构的变量），而无法显示任何数据。

图 2-3

这时，你可以使用XML DOM提供的方法和属性提取其中的字符串。代码如下：

<script>

function startRequest() {

           var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

    xmlhttp.open("GET", "hello.xml", true);

    xmlhttp.send(null);

           alert(xmlhttp.responseXML.getElementsByTagName("the")[0].firstChild.data);

}

</script>

在上面代码中使用DOM提供的getElementsByTagName方法获取the节点，然后再定位第一个the节点的子节点内容（有关DOM文档对象模型的方法和属性请参阅相关图书，本书不作深入研究）。

2.1.5  在请求中发送数据

上面实例演示了如何与服务器端指定文件建立连接，并获取服务器的响应数据。但是没有涉及到如何把客户端数据发送到服务器端以实现数据的交互。实现把数据从客户端向服务器端传递有两种方法：

第一种方法，通过查询字符串进行参数传递。

首先在服务器端新建一个ASP文件（hello.asp），在该文件中输入下面代码：

<%

name = Request.QueryString("name")

Response.AddHeader "Content-Type","text/html;charset=gb2312"

Response.Write "Hello:" & name

%>

其中第一行表示获取客户端传递的查询字符串参数值。什么是查询字符串，以及如何获取客户提交的数据？我们将在第12章中详细进行讲解，读者可以简单了解一下即可。

第2行代码表示设置响应内容的字符编码（详细讲解可以参阅第7章内容），这里设置服务器准备响应客户端的内容为中文简体编码。

第3行代码表示把响应信息返回给客户端。

然后，在前台页面中修改代码如下（XMLHttpRequest_4.html）：

<script>

function startRequest() {

           var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

    xmlhttp.open("GET", "hello.asp?name=zhuyinhong", true);

    xmlhttp.send();

           alert(xmlhttp.responseText);

}

</script>

<input name="" type="button" onclick="startRequest();" value="请求服务器" />

看见没有，所要传递的参数被附加在URL的后面，前面补加“?”分隔符。这就是GET方法发送数据。显示效果如图2-4所示。

图 2-4

上面所举示例是以GET方法向服务器传递数据，下面我们再尝试如何使用POST方法向服务器传递数据。

首先，在服务器中新建一个ASP文件（hello1.asp），在该文件中获取客户端传递的值，并返回响应，代码如下：

<%@Language="VBScript" CodePage="936"%>

<%

name = Request.Form("name")

Response.AddHeader "Content-Type","text/html;charset=gb2312"

Response.Write "Hello:" & name

%>

为了简化学习难度，这里依然以上面示例为基础进行讲解，上下两个示例的后台处理文件基本相同，不同点就是接收客户端数据的方法略有不同，在后面的章节中我们将详细讲解如何进行数据的接收和处理（参阅第12章内容）。

然后新建一个静态页面（XMLHttpRequest_5.html），请输入如下脚本代码：

<script>

function startRequest() {

           var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

    xmlhttp.open("POST", "hello1.asp", false);

           xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');

           xmlhttp.send("name=zhuyinhong");

           alert(xmlhttp.responseText);

}

</script>

<input name="" type="button" onclick="startRequest();" value="请求服务器" />

你可以看到，该示例代码的基本结构与上面示例的代码结构没有太大变化。但是在open方法中设置为POST方法。最关键的是增加了setRequestHeader方法，该方法专门用来设置请求的消息头，这里必须定义请求消息的内容类型为“application/x-www-form-urlencoded”，它表示传递是的表单值，如果不明白可以先不管，一般使用POST发送表单值时都必须设置该选项。

然后在send方法中附加要传递的值，该值是一个或多个“名/值”对，多个“名/值”对之间使用“&”分隔符进行分隔。这样在服务器端ASP程序就可以利用Request.Form()方法捕获所传递过来的值。

在“名/值”对中，“名”可以为表单域的名称（与表单域相对应），“值”可以是固定的值，也可以是一个变量。如果是变量，你就可以把表单域内包含的值直接传递给变量，再由变量负责把数据传递给服务器端。这时你还必须把open方法中的第3个参数设置为false，即关闭异步通信功能。

此时预览页面，单击提交按钮则会显示如图2-4所示效果。

2.1.6  跟踪XMLHttpRequest对象

由于XMLHttpRequest对象是不通过刷新页面来传递数据的，很多时候用户是无法准确判断数据是否已经发送给服务器，或者服务器是否已经返回了数据？

为此，XMLHttpRequest对象提供了很多属性和方法来实时跟踪数据传输的状态，这样用户就可以很方便的使用脚本来处理和控制HTTP的请求和响应。

当XMLHttpRequest对象把一个HTTP请求发送到服务器端时，要经历几个状态，这时你可以调用XMLHttpRequest对象的readyState属性来判断请求和响应已经进入了哪一步。

readyState属性包括5个取值（如表2­-2所示）。借助readyState属性的这些取值，你就可以判断请求和响应是否成功。

表2-2

属性值	说明
0（未初始化）	对象已建立，但是尚未初始化，即尚未调用open方法
1（初始化）	对象已建立，尚未调用send方法
2（发送数据）	send方法已调用，但是当前的状态及HTTP头部信息未知
3（数据传送中）	服务器已接收部分数据，因为响应及HTTP头部信息不全，这时通过responseBody和responseText获取部分数据会出现错误
4（完成）	数据接收完毕，此时可以通过responseBody和responseText获取完整的响应数据

如果readyState属性返回值为4，则说明响应完毕，那么你就可以放心的读取返回的数据了。但是在实际开发中，我们习惯上把处理响应的代码封装在一个函数内，然后借用onreadystatechange事件属性来触发该函数。onreadystatechange属性表示当readyState属性改变时将调用指定函数。

另外，XMLHttpRequest对象还提供了status属性，利用该属性可以更精确的跟踪HTTP请求和响应的状态以及细节。由于status属性包含的值众多，感兴趣的读者可以参考本书光盘中提供的参考手册，或者参考其他资料。不过请记住，如果当status属性取值为200或为0时，服务器响应完毕，我们常利用这个属性值来判断响应是否成功。

例如，我们在上面示例基础上再定义一个脚本函数（复制上面示例文件为XMLHttpRequest_6.html）：

function handleStateChange(){

           if(xmlHttp.readyState == 4){

               if (xmlHttp.status == 200 || xmlHttp.status == 0){

                   alert(xmlhttp.responseText);

               }

           }

}

不要忘记在脚本前面定义一个公共变量xmlHttp。然后，修改startRequest()函数：

var xmlhttp;

function startRequest() {

           xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

    xmlhttp.open("POST", "hello1.asp", false);

           xmlhttp.onreadystatechange = handleStateChange;     

           xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');

           xmlhttp.send("name=zhuyinhong");

}

你可以看到，这里没有把读取响应数据的代码行放在startRequest()函数的后面，而是单独放在一个函数中，然后通过onreadystatechange事件属性来调用这个事件句柄函数。

onreadystatechange属性应该位于send方法前面，否则不会响应。最后预览的结果如图2-4所示效果。

• ajax
• xml
• http