原生js實作AJAX(二)
簡易的AJAX請求
var u=window.u||{};
u.createXHR=function() {
var methods=[
function() {return new XMLHttpRequest();},
function() {return new ActiveXObject(Msxml2.XMLHTTP);},
function() {return new ActiveXObject(Microsoft.XMLHTTP);}
];
for(var i=;i<;i++) {
try {
methods[i]();
} catch(e) {
continue;
}
this.createXHR=methods[i];
return methods[i]();
}
throw new Error("沒有找到XHR對象");
};
u.ajax=function(options) {
var method=options.method||'GET',
url=encodeURI(options.url),
success=options.success,
failed=options.failed,
data=options.data||null;
var xhr=u.createXHR();//建立XHR對象
xhr.open(method,url,true);//指定請求
xhr.onreadystatechange=function() {
if(xhr.readyState==) {
if((xhr.status>=&&xhr.status<)||xhr.status==) {
success(xhr.responseText);//執行成功的回調函數
xhr=null;
}
} else {
if(xhr.status!=) {
failed(xhr.status);//執行失敗的回調函數
}
}
}
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//設定Content-Type
xhr.send(data);正式發送請求
}
HTTP請求的各部分有指定順序:請求方法和URL首先到達,然後是請求頭,最後是請求主體。XMLHttpRequest實作通常直到調用send方法才開始啟動網絡。
setRequestHeader()方法的調用必須在調用open之後,但在調用send之前,否則它将抛出異常。
目前這段代碼隻能實作簡單的AJAX請求,如GET方式發起請求,在url中攜帶參數或者使用POST方式,在data中包含請求主體,且必須為’find=pizz&&user=123’的格式才能被背景正常讀取。