首页 > 代码库 > XMLHttpRequest
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 = http://www.mamicode.com/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响应头确定的预期字节数。
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。