原生Ajax的XMLHttpRequest对象使用指南

XMLHttpRequest 是一个浏览器接口，使得 Javascript 可以进行 HTTP (S) 通信。

　　最早，微软在 IE 5 引进了这个接口。因为它太有用，其他浏览器也模仿部署了，ajax 操作因此得以诞生。

　　但是，这个接口一直没有标准化，每家浏览器的实现或多或少有点不同。HTML 5 的概念形成后，W3C 开始考虑标准化这个接口。2008年 2 月，就提出了 XMLHttpRequest Level 2 草案。

　　这个 XMLHttpRequest 的新版本，提出了很多有用的新功能，将大大推动互联网革新。本文就对这个新版本进行详细介绍。

新版本的功能

新版本的 XMLHttpRequest 对象，针对老版本的缺点，做出了大幅改进。

* 可以设置 HTTP 请求的时限。

* 可以使用 FormData 对象管理表单数据。

* 可以上传文件。

* 可以请求不同域名下的数据（跨域请求）。

* 可以获取服务器端的二进制数据。

* 可以获得数据传输的进度信息。

下面，我就一一介绍这些新功能 。

HTTP 请求的时限

有时，ajax 操作很耗时，而且无法预知要花多少时间。如果网速很慢，用户可能要等很久。

　　新版本的 XMLHttpRequest 对象，增加了 timeout 属性，可以设置 HTTP 请求的时限。

xhr.timeout = 3000;　　上面的语句，将最长等待时间设为 3000 毫秒。过了这个时限，就自动停止 HTTP 请求。与之配套的还有一个 timeout 事件，用来指定回调函数。

xhr.ontimeout = function (event){
    alert ('请求超时！');
}　　目前，Opera、Firefox 和 IE 10 支持该属性，IE 8 和 IE 9 的这个属性属于 XDomainRequest 对象，而 Chrome 和 Safari 还不支持。

FormData 对象

ajax 操作往往用来传递表单数据。为了方便表单处理，HTML 5 新增了一个 FormData 对象，可以模拟表单。

　　首先，新建一个 FormData 对象。

var formData = new FormData ();　　然后，为它添加表单项。

formData.append ('username'， '张三');
formData.append ('id'， 123456);　　最后，直接传送这个 FormData 对象。这与提交网页表单的效果，完全一样。

xhr.send (formData);　　FormData 对象也可以用来获取网页表单的值。

var form = document.getElementById ('myform');
var formData = new FormData (form);
formData.append ('secret'， '123456'); // 添加一个表单项
xhr.open ('POST'， form.action);
xhr.send (formData); 　

上传文件

新版 XMLHttpRequest 对象，不仅可以发送文本信息，还可以上传文件。

　　假定 files 是一个"选择文件"的表单元素（input[type="file"]），我们将它装入 FormData 对象。

var formData = new FormData ();
for (var i = 0; i < files.length;i++) {
    formData.append ('files[]'， files[i]);
}　　然后，发送这个 FormData 对象。

xhr.send (formData); 　　

　

进度信息

新版本的 XMLHttpRequest 对象，传送数据的时候，有一个 progress 事件，用来返回进度信息。

它分成上传和下载两种情况。下载的 progress 事件属于 XMLHttpRequest 对象，上传的 progress 事件属于 XMLHttpRequest.upload 对象。

我们先定义 progress 事件的回调函数。（绑定进度回调事件）

xhr.onprogress = updateProgress;   //上传
xhr.upload.onprogress = updateProgress; //下载

//回调处理

function updateProgress (event) {
    if (event.lengthComputable) {
        var percentComplete = event.loaded / event.total;
    }
}　

上面的代码中，event.total 是需要传输的总字节，event.loaded 是已经传输的字节。如果 event.lengthComputable 不为真，则 event.total 等于0。

与 progress 事件相关的，还有其他五个事件，可以分别指定回调函数：

* load 事件：传输成功完成。

* abort 事件：传输被用户取消。

* error 事件：传输中出现错误。

* loadstart 事件：传输开始。

* loadEnd 事件：传输结束，但是不知道成功还是失败

举例：传输成功:

xhr.upload.onload=loadProcess;

function loadProcess(){

}

1.创建新的XMLHttpRequest对象

var xmlHttpRequest;
function createXMLHttpRequest(){  
    try{

	//确保IE7,IE8,Firefox下可以运行

        xmlHttpRequest=new XMLHttpRequest();   
    }catch(e){

	//确保IE6可以运行,这里可以无视更古老的IE浏览器了

        try{
            xmlHttpRequest=new ActiveXObject("Msxml2.XMLHTTP");   
        }catch(e){
            try{
                xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");   
            }catch(e){
                 alert("您的浏览器不支持AJAX！");   
                 return false;   
            }   
        }   
    }
}

2.使用open方法配置请求

• request-type  发送请求的类型,主要为Get和Post.该参数必须

• url 要连接的url.该参数必须.
• asynch 如果希望使用异步连接,则为true,否则为false.此参数可选,默认为true.一般为更容易理解,一般写为true.

function sendRequestPost(url,bAsyn,param){  
    createXMLHttpRequest();  
    xmlHttpRequest.open("POST",url,bAsyn);   //
    xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");  
    xmlHttpRequest.onreadystatechange = processResponse;  
    xmlHttpRequest.send(param);  
} 

function processResponse(){  
    if(xmlHttpRequest.readyState == 4){  
        if(xmlHttpRequest.status == 200){  
            var res = xmlHttpRequest.responseText;  

1.  var responseTextJson = JSON.parse(responseText); // 使用json2.js中的parse方法将data转换成json格式   
2.                   userdiv.innerHTML=responseText + " name=" + responseTextJson.name + " age=" + responseTextJson.age;  

            window.alert(res);  
        }else{  
            window.alert("请求页面异常");  
        }  
    }  
 }

3.设置回调函数   xmlHttpRequest.onreadystatechange = processResponse

回调函数必须在发送请求前设定.我们设定了回调函数后,在随后发送请求后,在得到服务器的正常回应之后,就会调用设定的回调函数.此处需要注意的是,一般正确的服务器响应会出现在xmlHttp.readyState=4且xmlHttp.status=200时.

对于服务器响应的数据,我们可以根据需要通过xmlHttp.responseText或xmlHttp.responseXML来获取.

4.发送请求 xmlHttpRequest.send(param)

发送请求使用send方法,若为request-type为get时,可为send(null);若为post,则为send(data).

附1:

HTTP就绪状态readyState的属性值及含义:

属性值	备注
0	请求没有发出.在open之前
1	请求已经建立,但还没有发出,在open之后,send之前
2	请求已经发出,send已经被调用
3	请求已经处理,部分数据可用,服务器尚未完全反应
4	响应完成,可以访问服务器响应数据

HTTP状态码status的常用属性值及含义:

2XX 成功

4XX 请求错误

属性值	备注
200	请求成功
201	请求已实现
202	服务器已接受请求,但尚未处理
400	错误请求
401	请求授权失败
403	请求不允许
404	没有发现文件,查询或URI
500	服务器内部产生错误

 附2:

HTTP状态码status的全部属性值及含义:

1xx：请求收到，继续处理
2xx：操作成功收到，分析、接受
3xx：完成此请求必须进一步处理
4xx：请求包含一个错误语法或不 能完成
5xx：服务器执行一个完全有效请求失败

100——客户必须继续发出请求
101——客户要求服务器根据请求转换HTTP协议版本

200——交易成功
201——提示知道新文件的URL
202——接受和处理、但处理未完成
203——返回信息不确定或不完整
204——请求收到，但返回信息为空
205——服务器完成了请求，用户代理必须复位当前已经浏览过的文件
206——服务器已经完成了部分用户的GET请求

300——请求的资源可在多处得到
301——删除请求数据
302——在其他地址发现了请求数据
303——建议客户访问其他URL或访问方式
304——客户端已经执行了GET，但文件未变化
305——请求的资源必须从服务器指定的地址得到
306——前一版本HTTP中使用的代码，现行版本中不再使用
307——申明请求的资源临时性删除

400——错误请求，如语法错误
401——请求授权失败
402——保留有效ChargeTo头响应
403——请求不允许
404——没有发现文件、查询或URl
405——用户在Request-Line字段定义的方法不允许
406——根据用户发送的Accept拖，请求资源不可访问
407——类似401，用户必须首先在代理服务器上得到授权
408——客户端没有在用户指定的饿时间内完成请求
409——对当前资源状态，请求不能完成
410——服务器上不再有此资源且无进一步的参考地址
411——服务器拒绝用户定义的Content-Length属性请求
412——一个或多个请求头字段在当前请求中错误
413——请求的资源大于服务器允许的大小
414——请求的资源URL长于服务器允许的长度
415——请求资源不支持请求项目格式
416——请求中包含Range请求头字段，在当前请求资源范围内没有range指示值，请求
也不包含If-Range请求头字段
417——服务器不满足请求Expect头字段指定的期望值，如果是代理服务器，可能是下
一级服务器不能满足请求

500——服务器产生内部错误
501——服务器不支持请求的函数
502——服务器暂时不可用，有时是为了防止发生系统过载
503——服务器过载或暂停维修
504——关口过载，服务器使用另一个关口或服务来响应用户，等待时间设定值较长
505——服务器不支持或拒绝支请求头中指定的HTTP版本