XMLHttpRequest

1、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;
}

 

 

2、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方法发送给服务端。

 

3、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响应头肯定的预期字节数。