1. 神奇的XMLHttpRequest对象
IE7+ Firefox Opera Chrome 和 Safari 都支持原生的 XHR 对象,在这些浏览器中创建XHR对象要像下面这样使用XMLHttpRequert 构造函数。
var xhr = new XMLHttpRequest();
如果需要兼容 IE 低版本可以这样来使用:
//支持早期IE浏览器的XMLHttpRequest对象
function createXHR(){
if(typeof XMLHttpRequest !="undefined"){
return new XMLHttpRequest();
}else if(typeof ActiveXObject !="undefined"){
if(typeof argument.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]);
argument.callee.activeXString=versions[i];
break;
}catch(ex){
//跳过
}
}
}
return new ActiveXObject(argument.callee.activeXString);
}else{
throw new Error("No XHR object available.");
}
}
var xhr=createXHR();
2. XMLHttpRequest对象的使用
在使用XHR对象(即XMLHttpRequest对象)时,要调用的第一个方法是 open() ,它接受3个参数: 要发送的请求类型(“get”“post”等) 请求的URL和表示是否异步请求的布尔值。下面是调用这个方法的例子。
xhr.open("get","example.php",false);
这行代码会启动一个针对 example.php 的 GET 请求。有两点需要注意:一是 URL 相对于执行代码的当前页面(当然也可以使用绝对路径);二是调用 open() 并不会真正的发送请求,二是启动一个请求以备发送。
只能向同一个域中使用相同端口和协议的 URL 发送请求。如果 URL 与启动请求的页面有任何差别,都会引发安全问题。
要发送特定的请求,必须像下面这样调用 send() 方法:
xhr.send(null);
这里的 send() 方法接受一个参数,即要作为请求主体发送的数据。如果不需要通过请求主体发送数据,则必须传入 null 因为这个参数对有些浏览器来说是必需的。调用 send() 之后,请求就会被分派到服务器。
由于这次请求是同步的。 javascript 代码会等到服务器响应之后字啊继续执行。在收到响应后,响应的数据会自动填充XHR对象的属性,相关的属性简介如下。
- responseText : 作为响应主体被返回的文本。
- responseXML : 如果响应的内容类型是“ text/xml ”或 “application/xml”,这个属性中奖保存包含着响应数据的 XML DOM文档。
- status : 响应的 HTTP 状态。
- statusText : HTTP状态的说明。
在接收到响应后,第一步是检查 status 属性,已确定响应已经成功返回。一般来说,可以将 HTTP 状态代码为200作为成功的标志。此时,responseText 属性的内容已经就绪,而且在内容类型正确的情况下,responseXml也应该能够访问了。此外,状态代码为304表示请求的资源并没有被修改,可以直接使用浏览器中缓存的版本;当然,也意味着响应是有效的。为确保接收到适当的响应,应该像下面这样检测上述这两种状态代码:
if(xhr.readyState==4){
if((xhr.status>=200 && xhr.status<300) || xhr.status==304){
alert(xhr.responseText);
}else{
alert("Rewquest was unsuccessfull:"+xhr.status);
}
}
根据返回的状态代码,这个例子可能会显示由服务器返回的内容,也可能会显示一条错误消息。建议应该要通过 status 来决定下一步的操作,不要依赖 statusText ,因为后者在跨浏览器使用时不太可靠。另外,无论内容类型是什么,响应主体的内容都会保存到 responseText 属性中;而对于非 XML 数据而言, responseXML 属性的值将为 null 。
像前面这样发送同步请求当然没有问题,但多数情况下,我们还是要发送异步请求,才能让 javascript 继续执行而不必等待响应。此时,可以检测XHR对象的 readyState 属性,该属性表示请求/响应过程的当前活动阶段。这个属性可取的值如下。
- 0 :未初始化。尚未调用 open() 方法。
- 1 :启动。已经调用 open() 方法,但未调用 send() 方法。
- 2 :发送。已经调用 send() 方法,但尚未接收到响应。
- 3 :接收。已经接收到部分响应数据。
- 4 :完成。已经接收到全部响应数据,而且已经可以在客户端使用了。
只要 readyState 属性的值有一个值变成另一个值,都会触发一次 readystatechange 事件。可以利用这个时间来检测每次状态变化后 readyState 的值。通常,我们只对 readyState 值为4的阶段感兴趣,以为这时所有数据都已经就绪。不过,必须再调用 open() 方法之前指定 readystatechange 时间处理程序才能确保跨浏览器兼容性。下面来看一个例子。
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("Rewquest was unsuccessfull:"+xhr.status);
}
}
};
xhr.open("get","test.php",true);
xhr.send(null);
另外,在接收到响应之前还可以调用 abort() 方法来取消异步请求