封装通用的xhr对象,兼容各个版本

Posted 2021-02-08 沧海的雨季

// 封装通用的xhr对象,兼容各个版本

function createXHR(){

//判断浏览器是否将XMLHttpRequest作为本地对象实现,针对IE7,火狐,欧朋等

if(typeof XMLHttpRequest != "undefined"){

return new XMLHttpRequest();

}else if(typeof ActiveXObject != "undefined"){

// 将有可能出现的ActiveXObject版本放在一个数组中

var xhrArr=[‘Microsoft.XMLHTTP‘,‘MSXML2.XMLHTTP.6.0‘,‘MSXML2.XMLHTTP.5.0‘,

‘MSXML2.XMLHTTP.4.0‘,‘MSXML2.XMLHTTP.3.0‘,‘MSXML2.XMLHTTP.2.0‘];

// 遍历创建XMLHttpRequest对象

var len=xhrArr.length,xhr;

for(var i=0;i<len;i++){

try{

// 创建XMLHttpRequest对象

xhr=new ActiveXObject(xhrArr[i]);

break;

}

catch(ex){

}

}

return xhr;

}else{

throw new Error (‘No XHR object available‘)

}

}

 

 

 

 

 

//XHLHttpRequest对象 (第一步)

var xhr=createXHR(),data=null;

 

// 响应XMLHttpRequest对象函数状态变化的函数,onreadystatechange在readystatuschange在readystatechange属性发生改变时触发

//(第三步)

xhr.onreadystatechange=function(){

// 异步调用成功,响应内容解析完成,可以在客户端调用

if(xhr.readyState===4){

if((xhr.status>=200 && xhr.status<300) || xhr.status===304){

//第五步

// 获得服务器返回的数据

data=JSON.parse(xhr.responseText);

//渲染数据到页面中

renderDataToDom();

}

}

}

//创建请求 (第二步)

xhr.open("get","./server/slider.json",true);

// 发送请求(第四步)

xhr.send(null);