XMLHttpRequest

一、XMLHttpRequest对象

IE7+、标准浏览器可使用原生的XMLHttpRequest对象，IE6需要使用IE自己实现的BOM对象ActiveXObject创建XHR对象。

写一段跨浏览器创建XHR对象的代码：

function createXHR(){
    var objXMLHttp = null;
    if (window.XMLHttpRequest) {
        objXMLHttp = new XMLHttpRequest();
    } else {
        var MSXML = ['MSXML2.XMLHTTP.5.0', 'MSXML2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP', 'Microsoft.XMLHTTP'];
        for (var n = 0; n < MSXML.length; n++) {
            try {
                objXMLHttp = new ActiveXObject(MSXML[n]);
                break;
            }catch (e) {
            }
        }
    }return objXMLHttp;
}

 

二、XHR的用法

（1）方法属性

open方法

方法接受三个参数：

请求方法：get、post

请求URL

是否异步调用：true异步调用，false同步AJAX

如果是同步AJAX请务必设置超时时间避免浏览器长时间锁死。可用定时器保证这一点儿，下文中会提到这一点。

 

onreadystatechange方法

每次readyState值变化时都会调用该事件处理程序，可在函数内部判断readyState（等于4）、status（大于等于200小于300或者等于304）的值取xhr.responseText的值执行业务层代码。

 

setRequestHeader方法

open之后send之前调用

 

send方法

方法接受一个参数

调用send方法可将数据作为请求主体发送到服务端（通常当请求方法为get时该参数传null），如果不需要提交数据请务必传参数null，在某些浏览器下该参数是必须的。

 

getResponseHeader方法

获取指定的响应头

 

getAllResponseHeader方法

返回整个响应头部字符串，注意会换行，需要自己解析字符串。

 

abort

在接收到响应之前可以调用该方法取消异步请求，注意，调用该方法之后，不允许再访问与响应有关的对象属性

 

（2）值属性

responseText：

响应主体文本

responseXML：

当响应头部content-type为application/xml或者text/xml时该值不为空

status：

响应的http状态码，IE浏览器通过ActiveX创建的XHR对象会将204状态码设置为1223

statusText：

状态码的短说明

readyState：

0 初始状态

1 调用open

2 调用send，还未收到响应

3 接收部分数据

4 数据接收完毕，可在客户端使用

 

（3）请求方法

get请求

通过url传递参数时务必对参数名与参数值进行encodeURIComponent编码

 

post请求

可用XHR来模拟表单请求，设置请求头位application/x-www-form-urlencoded，再将数据拼装成查询字符串（&分割键值对）的形式通过send方法发送给服务端。

 

三、XMLHttpRequest 2级

（1）FormData

web应用中比较常用的功能为表单数据的序列化(xhr模拟表单提交)，有了FormData世界将变得很美好，如下：

var data = new FormData(document.forms[0]);

xhr.send(data);

 

（2）超时设定

IE8为XHR对象添加了一个timeout属性，表示请求在等待响应多长时间之后就终止。在给timeout设定值之后，在规定时间内浏览器还没有接收到响应就会触发ontimeout事件处理程序。

xhr.timeout = 1000; // 1秒之后没有收到响应就执行ontimeout时间处理程序（仅适用于IE8+）

xhr.ontimeout = function(){alert('timeout!')};

xhr.send(null);

由于timeout属性仅适用于IE8+通常我们会使用定时器来实现相应的功能，定时检查xhr.status的状态，设定时间内还没有变为200则调用abort方法取消请求。应用场景：139邮箱的通讯层

 

（3）进度事件

loadstart

progress

error

abort

load

loadend

IE8+只支持load事件，load事件在接收到完整的响应数据时触发，可省掉对readyState值的判断。

 

process事件

可在数据接收的过程中重复触发，可用来做进度指示器（文件下载）。

文件上传也有process事件，只是该属性为xhr.upload.onprogcess

onprogcess事件处理程序会接收到一个event对象，event对象的target属性指向的是xhr对象，还有其他三个很有用的属性：

lengthComputable,position,totalSize。其中，lengthComputable表示进度信息是否可用的布尔值，position表示已经接收的字节数，totalSize表示Content-Length响应头确定的预期字节数。