AJAX:
XMLHttpRequest是AJAX的基礎(chǔ)
1.創(chuàng)建一個XMLHttpRequest對象：
const xmlhttp;
if(window.XMLHttpRequest){
xmlhttp =new XMLHttpRequest();
}else{
//針對IE
xmlhttp = new ActiveXObject(“Microsoft.XMLHttp”）；
}
2.用XMLHttpRequest向服務(wù)器發(fā)送請求：
首先查看XMLHttpRequest對象的open()和send()方法
open(method,url,async)
規(guī)定請求的類型、URL以及是否異步請求，如果要用AJAX，要設(shè)置為異步
method:請求的類型，GET、POST等。
async:true異步、false同步
send(string)
將請求發(fā)送到服務(wù)器
string:請求的數(shù)據(jù)，僅用于POST 請求
//一個發(fā)送GET請求并且?guī)д埱笮畔⒌睦?
//xmlhttp對象的創(chuàng)建參考上面的例子
xmlhttp.open("GET","localhost:8080/index.html?a=1&b=2",true);
xmlhttp.send();
/*URL中‘？’之后的部分稱為querystring,&代表請求參數(shù)的分隔符
上面的例子中發(fā)送了{(lán)a:1,b:2} */
3.像HTML表單那樣POST數(shù)據(jù)
使用setRequestHeader()添加HTTP頭部，然后在send()方法中規(guī)定傳輸?shù)臄?shù)據(jù):
xmlhttp.open("POST","localhost:8080/index.htm",true);
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlhttp.send("name=bill&age=18");
setRequestHeader(header,value):
向請求添加HTTP頭，header規(guī)定頭的名稱，value規(guī)定頭的值。
4.服務(wù)器響應(yīng)事件:
onreadystatechange事件:
當(dāng)請求被發(fā)送到服務(wù)器時，我們需要執(zhí)行一些基于響應(yīng)的任務(wù)，每當(dāng)readyState改變時，就會觸發(fā)onreadystatechange事件，readyState屬性存有XMLHttpRequest的狀態(tài)信息。
XMLHttpRequest對象的重要屬性：
readyState與status的具體工作流程：
status的值可以分為以下幾大類：
- 1xx:信息處理類，表示接收到請求并且繼續(xù)處理
- 2xx:處理成功響應(yīng)類，表示動作被成功接收，理解和接受
- 3xx:重定向響應(yīng)類，為了完成指定的動作，必須接受進(jìn)一步處理
- 4xx:客戶端錯誤，客戶請求包含語法錯誤或者是不能正確執(zhí)行
- 5xx:服務(wù)端錯誤，服務(wù)器不能正確執(zhí)行一個正確的請求
在onreadystatechange事件中，我們規(guī)定當(dāng)服務(wù)器已做好被處理的準(zhǔn)備時所執(zhí)行的任務(wù)。onreadystatechange事件被觸發(fā)五次，對應(yīng)著readyState的每個變化，當(dāng)readyState等于4且狀態(tài)status為200時，表示響應(yīng)已經(jīng)就緒：
xmlhttp.onreadystatechange = function (){
if (xmlhttp.readyState == 0 ){
console.log('處于定義XHR但未初始化階段');
}
if (xmlhttp.readyState == 1){
console.log('調(diào)用send()方法正在發(fā)送請求");
}
if (xmlhttp.readyState == 2){
console.log('載入完成，已經(jīng)接受到全部響應(yīng)內(nèi)容");
}
if (xmlhttp.readyState == 3){
console.log("正在解析收到的內(nèi)容");
}
if (xmlhttp.readyState == 4){
console.log("解析完畢可以返回客戶端應(yīng)用");
}
if (xmlhttp.readyState ==4 &&xmlhttp.status ==200){
console.log("響應(yīng)就緒");
console.log("響應(yīng)信息",xmlhttp.responseText);
}
}
5.封裝XMLHttpRequest
封裝模擬jquery的AJAX請求函數(shù)，目的是為了減少對jquery的依賴以及提高代碼的復(fù)用率，使用callback回調(diào)函數(shù)讓onreadystatechange事件執(zhí)行，使得執(zhí)行的任務(wù)可變:
//@param:requestobj類似于jquery的ajax請求傳入的對象
//@param:requestobj.method請求的方式，"GET"\"POST"
//@param:requestobj.url 請求的URL
//@param:requestobj.data請求的信息
//@param:requestobj.header 請求的頭部信息
//@param:requestobj.success，onreadystatechange事件的回調(diào)
function ajax( requestobj ){
requestobj = requestobj || {};
let method = (requestobj.method == null ?
"GET" : requestobj.method.toUpperCase());
let url = requestobj.url || ' ';
if( url == "" )
return "url不能為空"
let data = requestobj.data || null;
let header = requestobj.header || 'application/x-www-form-unlenconded;charset=utf-8’;
let callback = requestobj.success;
let xmlhttp = null;
if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
}else{
xmlhttp = new ActiveObject("Microsoft.XMLHTTP");
}
//將對象轉(zhuǎn)化成為querystring形式
let paramarray = [ ];
for (key in data ) {
paramarray.push(key+'='+data[key]);
}
let datapost = paramarray.join('&‘’);
xmlhttp.onreadystatechange = function (){
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
callback(xmlhttp.responseText);
}
//可以自行添加其他響應(yīng)，例如status == 404的情況等
};
if(method == "POST"){
xmlhttp.open(method,url,true);
xmlhttp.setRequestHeader("Content-Type",header);
xmlhttp.send(datapost);
}else if (method == "GET"){
xmlhttp.open(method,url+'?'+datapost,true);
xmlhttp.setRequestHeader("Content-Type",header);
xmlhttp.send();
}
}
6.其他XMLHttpRequest方法：
abort()方法：取消當(dāng)前響應(yīng)，關(guān)閉連接并且結(jié)束任何未決的網(wǎng)絡(luò)活動。
這個方法把XMLHttpRequest對象重置為readyState為0的狀態(tài)，并且取消所有未決的網(wǎng)絡(luò)活動，如果響應(yīng)不再必要時，可以調(diào)用這個方法.
getAllResponseHeaders():把HTTP響應(yīng)頭部作為未解析的字符串返回。
如果readyState小于3，這個方法返回null。否則，它返回服務(wù)器發(fā)送的所有HTTP響應(yīng)的頭部。頭部作為單個字符串返回，一行一個頭部，每行用換行符“\r\n”隔開。
getResponseHeader()：返回置頂?shù)腍TTP響應(yīng)頭部信息，參數(shù)是要返回的HTTP響應(yīng)頭部的名稱，不區(qū)分大小寫。
如果沒有接受到頭部參數(shù)或者readyState小于3則為空字符串，如果接受到多個有指定名稱的頭部，這個頭部的值被鏈接起來并返回，使用都好和空格分隔開各個頭部的值。
