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(未找到)等。