码迷,mamicode.com
首页 > 其他好文 > 详细

XMLHttpRequest

时间:2014-08-01 10:33:31      阅读:203      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   使用   os   io   文件   

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

XMLHttpRequest,布布扣,bubuko.com

XMLHttpRequest

标签:style   blog   http   color   使用   os   io   文件   

原文地址:http://www.cnblogs.com/hellohuman/p/3884246.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!