AJAX:
XMLHttpRequest是AJAX的基礎(chǔ)
1.創(chuàng)建一個(gè)XMLHttpRequest對(duì)象：
const xmlhttp;
if(window.XMLHttpRequest){
xmlhttp =new XMLHttpRequest();
}else{
//針對(duì)IE
xmlhttp = new ActiveXObject(“Microsoft.XMLHttp”）店茶；
}
2.用XMLHttpRequest向服務(wù)器發(fā)送請(qǐng)求：
首先查看XMLHttpRequest對(duì)象的open()和send()方法
open(method,url,async)
規(guī)定請(qǐng)求的類型、URL以及是否異步請(qǐng)求，如果要用AJAX，要設(shè)置為異步
method:請(qǐng)求的類型，GET朱躺、POST等怎抛。
async:true異步揍拆、false同步
send(string)
將請(qǐng)求發(fā)送到服務(wù)器
string:請(qǐng)求的數(shù)據(jù)拢操，僅用于POST 請(qǐng)求
//一個(gè)發(fā)送GET請(qǐng)求并且?guī)д?qǐng)求信息的例子:
//xmlhttp對(duì)象的創(chuàng)建參考上面的例子
xmlhttp.open("GET","localhost:8080/index.html?a=1&b=2",true);
xmlhttp.send();
/*URL中‘锦亦？’之后的部分稱為querystring,&代表請(qǐng)求參數(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):
向請(qǐng)求添加HTTP頭令境，header規(guī)定頭的名稱杠园，value規(guī)定頭的值。
4.服務(wù)器響應(yīng)事件:
onreadystatechange事件:
當(dāng)請(qǐng)求被發(fā)送到服務(wù)器時(shí)舔庶，我們需要執(zhí)行一些基于響應(yīng)的任務(wù)抛蚁，每當(dāng)readyState改變時(shí)，就會(huì)觸發(fā)onreadystatechange事件惕橙，readyState屬性存有XMLHttpRequest的狀態(tài)信息瞧甩。
XMLHttpRequest對(duì)象的重要屬性：
readyState與status的具體工作流程：
status的值可以分為以下幾大類：
- 1xx:信息處理類，表示接收到請(qǐng)求并且繼續(xù)處理
- 2xx:處理成功響應(yīng)類弥鹦，表示動(dòng)作被成功接收肚逸，理解和接受
- 3xx:重定向響應(yīng)類，為了完成指定的動(dòng)作彬坏，必須接受進(jìn)一步處理
- 4xx:客戶端錯(cuò)誤朦促，客戶請(qǐng)求包含語(yǔ)法錯(cuò)誤或者是不能正確執(zhí)行
- 5xx:服務(wù)端錯(cuò)誤，服務(wù)器不能正確執(zhí)行一個(gè)正確的請(qǐng)求
在onreadystatechange事件中栓始，我們規(guī)定當(dāng)服務(wù)器已做好被處理的準(zhǔn)備時(shí)所執(zhí)行的任務(wù)务冕。onreadystatechange事件被觸發(fā)五次，對(duì)應(yīng)著readyState的每個(gè)變化幻赚，當(dāng)readyState等于4且狀態(tài)status為200時(shí)禀忆，表示響應(yīng)已經(jīng)就緒：
xmlhttp.onreadystatechange = function (){
if (xmlhttp.readyState == 0 ){
console.log('處于定義XHR但未初始化階段');
}
if (xmlhttp.readyState == 1){
console.log('調(diào)用send()方法正在發(fā)送請(qǐng)求");
}
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請(qǐng)求函數(shù)坯屿，目的是為了減少對(duì)jquery的依賴以及提高代碼的復(fù)用率油湖，使用callback回調(diào)函數(shù)讓onreadystatechange事件執(zhí)行，使得執(zhí)行的任務(wù)可變:
//@param:requestobj類似于jquery的ajax請(qǐng)求傳入的對(duì)象
//@param:requestobj.method請(qǐng)求的方式领跛，"GET"\"POST"
//@param:requestobj.url 請(qǐng)求的URL
//@param:requestobj.data請(qǐng)求的信息
//@param:requestobj.header 請(qǐng)求的頭部信息
//@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");
}
//將對(duì)象轉(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ò)活動(dòng)喊括。
這個(gè)方法把XMLHttpRequest對(duì)象重置為readyState為0的狀態(tài)，并且取消所有未決的網(wǎng)絡(luò)活動(dòng)矢棚，如果響應(yīng)不再必要時(shí)郑什，可以調(diào)用這個(gè)方法.
getAllResponseHeaders():把HTTP響應(yīng)頭部作為未解析的字符串返回。
如果readyState小于3蒲肋，這個(gè)方法返回null蘑拯。否則钝满，它返回服務(wù)器發(fā)送的所有HTTP響應(yīng)的頭部。頭部作為單個(gè)字符串返回申窘，一行一個(gè)頭部弯蚜，每行用換行符“\r\n”隔開。
getResponseHeader()：返回置頂?shù)腍TTP響應(yīng)頭部信息剃法，參數(shù)是要返回的HTTP響應(yīng)頭部的名稱碎捺，不區(qū)分大小寫。
如果沒有接受到頭部參數(shù)或者readyState小于3則為空字符串贷洲，如果接受到多個(gè)有指定名稱的頭部收厨，這個(gè)頭部的值被鏈接起來(lái)并返回，使用都好和空格分隔開各個(gè)頭部的值优构。
