Ajax技术之XMLHttpRequest对象详解

Ajax是XMLHttpRequest对象和JavaScript、XML、CSS、DOM等多种技术的组合。其中，只有XMLHttpRequest对象是新技术，其他的均为已有的技术。下面就对Ajax使用的XMLHttpRequest对象进行介绍。

1、XMLHttpRequest对象的由来

Ajax使用的技术中，最核心的技术就是XMLHttpRequest，它是一个具有应用程序接口的JavaScript对象，能够使用超文本传输协议(HTTP)连接一个服务器，是微软公司为了满足开发者的需要，于1999年在IE5.0浏览器中率先推出的。现在许多浏览器都对其提供了支持，不过实现方式与IE有所不同。

2、初始化XMLHttpRequest对象

在使用XMLHttpRequest对象发送请求和处理响应之前，首先需要初始化该对象，由于XMLHttpRequest不是一个W3C标准，所以对于不同的浏览器，初始化的方法也是不同的。通常情况下，初始化XMLHttpRequest对象只需要考虑两种情况，一种是IE浏览器，一种是非IE浏览器。下面分别进行介绍。

1)IE浏览器

IE浏览器把XMLHttpRequest实例化为一个ActiveX对象。具体方法如下：

var http_request = new ActiveXObject("Msxml2.XMLHTTP");

或

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

在上面的语法中，Msxml2.XMLHTTP和Microsoft.XMLHTTP是针对IE浏览器的不同版本而进行设置的，目前比较常用的是这两种。

2)非IE浏览器

非IE浏览器(如Firefox、Opera、Mozilla、Safari)把XMLHttpRequest对象实例化为一个本地JavaScript对象。具体方法如下：

var http_request = new XMLHttpRequest();

为了提高程序的兼容性，可以创建一个跨浏览器的XMLHttpRequest对象。创建一个跨浏览器的XMLHttpRequest对象其实很简单，只需要判断一下不同浏览器的实现方式，如果浏览器提供了XMLHttpRequest类，则直接创建一个实例，否则实例化一个ActiveX对象。具体代码如下：

if(window.XMLHttpRequest){
	http_request = new XMLHttpRequest();
}else if(window.ActiveXObject){
	try{
		http_request = new ActiveXObject("Msxml2.XMLHTTP");
	}catch(e){
		try{
			http_request = new ActiveXObject("Microsoft.XMLHTTP");
		}catch(e){
		}
	}
}

在上面的代码中，调用window.ActiveXObject将会返回一个对象，或是null。在if语句中，会把返回值看作是true或false(如果返回的是一个对象，则为true；否则返回null，则为false)。

3、XMLHttpRequest对象的常用方法

XMLHttpRequest对象提供了一些常用的方法，通过这些方法可以对请求进行操作。下面对XMLHttpRequest对象的常用方法进行介绍。

1)open()方法

用于设置进行异步请求目标的URL、请求方法以及其他参数信息。其具体语法如下：

open("method",URL"[,asyncFlag[,"userName"[,"password"]]])

method：用于指定请求的类型，一般为GET或POST。

URL：用于指定请求地址，可以使用绝对地址或者相对地址，并且可以传递查询字符串。

asyncFlag：可选参数，用于指定请求方式，异步为true，同步为false，默认为true。

userName：可选参数，用于指定请求用户名，没有时可以省略。

password：可选参数，用于指定请求密码，没有时可以省略。

例如：设置异步请求目标为register.jsp，请求方法为GET，请求方式为异步的代码如下：

open("GET","register.jsp",true);

2)send()方法

用于向服务器发送请求。如果请求声明为异步，该方法将立即返回，否则将等到接收到响应为止。其语法格式如下：

send(content)

content：用于指定发送的数据，可以是DOM对象的实例、输入流或字符串。如果没有参数需要传递，可以设置为null。

例如：向服务器发哦是哪个一个不包含任何参数的请求，可以使用下面的代码：

http_request.send(null);

3)setRequestHeader()方法

用于为请求的HTTP头设置值。其具体语法格式如下：

setRequestHeader("header","value")

header：用于指定HTTP头。

value：用于为指定的HTTP头设置值。

注意：setRequestHeader()方法必须在调用open()方法之后才能调用。

例如：在发送POST请求时，需要设置Content-Type请求头的值为“application/x-www-form-urlencoded”，这时就可以通过setRequestHeader方法进行设置、具体代码如下：

http_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

4)abort()方法

用于停止或放弃当前异步请求。其语法格式如下：

abort()

5)getResponseHeader()方法

用于以字符串形式返回指定的HTTP头信息。其语法格式如下：

getResponseHeader("headerLabel")

headerLabel：用于指定HTTP头，包括Server、Content-Type和Date等。

例如：要获取HTTP头Content-Type的值，可以使用以下代码：

http_request.getResponseHeader("Content-Type");

6)getAllResponseHeaders()方法

用于以字符串形式返回完整的HTTP头信息，其中包括Server、Content-Type和Content-Length。其语法格式如下：

getAllResponseHeaders()

例如，应用下面的代码调用getAllResponseHeaders()方法，将弹出对话框显示完整的HTTP头信息。

alert(http_request.getAllResponseHeaders());

4、XMLHttpRequest对象的常用属性

XMLHttpRequest对象提供了一些常用属性，通过这些属性可以获取服务器的响应状态及相应内容。下面将对XMLHttpRequest对象的常用属性进行介绍。

1)onreadystatechange属性

用于指定状态改变时所触发的事件处理器。在Ajax中，每个状态改变时都会触发这个事件处理器，通常会调用一个JavaScript函数。

例如，指定状态改变时触发JavaScript函数getResult()的代码如下：

http_request.onreadystatechange = getResult;

注意：在指定所触发的事件处理器时，所调用的JavaScript函数不能添加小括号及指定参数名。不过这里可以使用匿名函数。例如，需要调用带参数的函数getResult()，可以使用如下代码：

http_request.onreadystatechange = function(){
	getResult("添加的参数");
};

2)readyState属性

用于获取请求的状态。该属性包括5个属性值，如下表所示：

3)responseText属性

用于获取服务器的响应，表示为字符串。

4)responseXML属性

用于获取服务器的响应，表示为XML。这个对象可以解析为一个DOM对象。

5)status属性

用于返回服务器的HTTP状态码，常用的状态码如下表所示：

6)statusText属性

用于返回HTTP状态码对应的文本，如OK或Not Found(未找到)等。