标签: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