XHR

varXHRRequest;

//創(chuàng)建XHR

function createXHR(){

? ? if(typeof XMLHttpRequest ?!= 'undefined'){//IE7+ chrome hotfox and so on

? ? ? ? return new XMLHttpRequest();

? ? }else if(typeof ActiveXObject!='undefined'){//IE7-

? ? if(typeof arguments.callee.activeXString!='string'){

? ? ? ? var version= ['MSXML2.XMLHTTP6.0','MSXMLHTTP3.0','MSXMLHTTP'];

? ? ? ? var len=version.length;

? ? for(vari=0;i<len; i++){

? ? ? ? try{

? ? ? ? new ActiveXObject(version[i]);

? ? ? ? arguments.callee.activeXString=version[i];

? ? ? ? }catch(ex){ }

? ? }

}

return new ActiveXObject(arguments.callee.activeXString);

// return new ActiveXObject("Microsoft.XMLHTTP"); ?//可以直接使用該方法兼容ie5/6

}else{

throw newError("No XHR object avaliable");

}

}



function XHRTools(option) {

if(!XHRRequest){

XHRRequest=createXHR();

}

var params= option.params;

var requestType="";

var url="";

var asyn= option.asyn=="undefined"?true:option.asyn;

var data="";

var dataType=params.dataType =="undefined"?"text":params.dataType;

var contentType= option.contentType=="undefined"?"application/x-www-form-urlencoded": option.contentType;

var timeout= option.timeout!="undefined"?option.timeout:2000;//IE8+

url=addURLParam(requestType,url,"name","milk");

//監(jiān)測當(dāng)前活動狀態(tài)readyState 0:未調(diào)用open 1:調(diào)用open未調(diào)用send ?2:調(diào)用send未接收到響應(yīng) 3:接收到部分響應(yīng) ?4:接收到全部響應(yīng)

//在open之前指定onreadystatechange可保證跨瀏覽器兼容性

//onload可以替代onreadystatechange事件,表示在接收到完整的響應(yīng)數(shù)據(jù)時觸發(fā)

XHRRequest.onreadystatechange=function() {

if(XHRRequest.readyState==4){

try{

if((XHRRequest.status>=200&&XHRRequest.status<300) ||XHRRequest.status==304){//304表示請求的資源并沒有被修改,可以使用瀏覽器中緩存的版本

alert(XHRRequest.responseText);

}else{

alert("Request was unsucessful: "+XHRRequest.status);

}

}catch(ex){

//當(dāng)超時時,status可能是4,如果在超時終止請求之后再訪問status屬性,就會導(dǎo)致錯誤,所以使用try catch語句

//這里可以處理超時事件

}

}

};



//onprogress事件會接收一個event對象,其target屬性是XHR對象。還有額外三個屬性:lengthComputable進度信息是否可用,position已接收字節(jié)數(shù),totalSizegenju Content-Length響應(yīng)頭部確定的預(yù)期字節(jié)數(shù)。

//在open之前添加。

XHRRequest.onprogress=function(event) {

vardivStatus=document.getElementById("status");

if(event.lengthComputable){//進度信息是否可用

divStatus.innerHTML="Received "+ event.position+" of "+event.totalSize +" bytes";

}

};


XHRRequest.responseType=dataType;

XHRRequest.open(requestType,url,asyn);

//在調(diào)用open之后,send之前,設(shè)置請求頭部信息

XHRRequest.setRequestHeader("Content-Type",contentType);

XHRRequest.setRequestHeader("myHeader","myValue");

XHRRequest.timeout=timeout;


XHRRequest.ontimeout=function() {

? ? alert("Request did not return in time.");

}

XHRRequest.send(data);

};

function addURLParam(requestType, url, key, value) {

url += (url.indexOf("?")== -1)?"?":"&";

if(requestType=='get'){

//get請求的參數(shù)名和值要encodeURIComponent

url +=encodeURIComponent(key)+"="+encodeURIComponent(value);

}else{

url += (key)+"="+(value);

}

returnurl;

};

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 個人博客:https://yeaseonzhang.github.io 花了半個多月的時間,終于又把“JS紅寶書”...
    Yeaseon閱讀 1,850評論 2 23
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn),斷路器,智...
    卡卡羅2017閱讀 136,506評論 19 139
  • 摘自《JavaScript高級程序設(shè)計》 一、簡述 Ajax是Asynchronous Javascript + ...
    寧小姐的慢時光閱讀 11,142評論 0 8
  • 在使用XHR對象時,要調(diào)用的第一個方法時open(),它接受三個參數(shù):要發(fā)送的請求的類型("get","post"...
    章柏華閱讀 1,430評論 0 0
  • 2005年,jjg發(fā)表了一篇在線文章,他在文章里介紹了一種技術(shù),叫Ajax,是對Asynchronous Java...
    章柏華閱讀 1,895評論 0 0

友情鏈接更多精彩內(nèi)容