正文
通过XMLHttpRequest,ActiveXObject实现ajax请求
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
今天学习了原生的ajax请求。我将涉及到的ajax请求方法封装成了一个对象：
var xhr={
getXHR:function(){
var XHR = null;
if(typeof window.ActiveXObject != 'undefined'){
XHR = xhr.createActiveXObject();
}else{
XHR = xhr.createStandardXHR();
}
return XHR;
},
createActiveXObject:function(){
try{
return new window.ActiveXObject("Mscrosoft.XMLHttp");
}catch(e){}
},
createStandardXHR:function(){
try{
return new window.XMLHttpRequest();
}catch(e){}
},
onreadystatechange:function(xhr,callback){
if(!callback){return;}
if(xhr.readyState == 4){
if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
callback(xhr.responseText);
}
}
},
//IE8+
ontimeout:function(callback){
if(!callback){return;}
callback();
},
onprogress:function(event,callback){
console.log("dsss");
if(!callback){return;}
callback(event);
}
};
发送一个请求：
var XHR = xhr.getXHR();
XHR.onreadystatechange=xhr.onreadystatechange(function(data){
console.log(data);
}); XHR.timeout=10000; XHR.ontimeout = xhr.ontimeout(function(){
alert("timeout");
}); XHR.onprogress = xhr.onprogress(function(event){
console.log(event.totalSize);
}); XHR.open("get","url",true);
XHR.send(null);
open方法接收三个参数，请求类型，请求url，是否是异步。
当为异步请求时，XHR的readystate属性有以下属性值：
当为0时，即表示没有调用open()方法；
当为1时，此时已经调用了open()方法；
当为2时，此时已经调用了send()方法；
当为3时，此时已经有部门的数据相应了；
当为4时，此时数据已经全部相应，而且可以在客户端使用了；
每次readyState的值改变，都会触发一次onreadystatechange事件，因此要在调用open()之前指定onreadystatechange事件以便判断是否已经响应完成且可以使用数据了。
对onreadystatechange事件的处理程序为：
onreadystatechange:function(xhr,callback){
if(!callback){return;}
if(xhr.readyState == 4){
if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
callback(xhr.responseText);
}
}
},
首选检测是否已经接收了全部响应数据，因此需要判断xhr.readyState的值是否为4；
当响应完成后，响应结果存在多种，有的是500失败了，有的是404未找到等等。因此需要根据返回的状态status的值来判断响应是否成功。当status为304时，表示的是该资源缓存了，直接取的缓存数据。
XHR.send(null) ：发送请求，当没有参数传递时，参数为null;当为get请求时，携带的参数需要通过encodeURIComponent进行编码。
也可以自定义请求的头部信息，在send()与open()方法之间进行设置：
XHR.sendRequestHeader(key,value);
