摘要：的交互原理則是請求事件目標(biāo)從而到達(dá)后端事件目標(biāo)。事件目標(biāo)對請求事件進(jìn)行驗證實現(xiàn)業(yè)務(wù)邏輯，最后可以響應(yīng)處理結(jié)果與前端交互。

ajax 即“Asynchronous Javascript And XML”（異步 JavaScript 和 XML），是指一種創(chuàng)建交互式網(wǎng)頁應(yīng)用的網(wǎng)頁開發(fā)技術(shù)。當(dāng)初JavaScript的變革就是ajax的出現(xiàn)而改變。在現(xiàn)代web領(lǐng)域?qū)?shù)據(jù)的異步加載和局部更新上也在大量采用ajax這項技術(shù)。
目前瀏覽器在使用ajax技術(shù)上都是使用XMLHttpRequest(XHR)對象來對服務(wù)器進(jìn)行交互。對于IE低版本（6/7）上則是使用的另一種實現(xiàn)方式（ActiveXObject),我們可以從URL獲取數(shù)據(jù)，而不用讓整個頁面刷新，從而實現(xiàn)局部刷新。這樣請求的次數(shù)也會大大減少,有效節(jié)約資源浪費。XMLHttpRequest的交互原理則是XMLHttpRequst請求事件目標(biāo)（XMLHttpRequestEventTarget)從而到達(dá)后端事件目標(biāo)。事件目標(biāo)對請求事件進(jìn)行驗證實現(xiàn)業(yè)務(wù)邏輯，最后可以響應(yīng)處理結(jié)果與前端交互。XMLHttpRequest不光能請求XML類型的數(shù)據(jù)（文本、圖片、html，信息流等），同樣還支持HTTP以外的協(xié)議，比如文件流和ftp等等。類似的還有WebSockets（全雙工通信），Server-Sent event（HTML5服務(wù)器發(fā)送事件）。

在使用XMLHttpRequest之前我們需要初始化一個XMLHttpRequest對象，才能使用它的屬性和方法。

常用方法和屬性：

// 初始化對象，將最先調(diào)用該對象的構(gòu)造函數(shù)
var oReq = new XMLHttpRequest(); ?
oReq.open(method,url,async);  // 初始化一個請求，例如 oReq.open("GET",url,true)


++++++++++++++++++++++++++++++++++++++++++
function reqListener () {
  console.log(this.responseText);
}
var oReq = new XMLHttpRequest();
oReq.onload = reqListener; // 請求加載完成調(diào)用此方法
oReq.open("get", "yourFile.txt", true);
oReq.send();
// XMLHttpRequest同樣也支持多種時間綁定，第一個參數(shù)為觸發(fā)時間，第二個參數(shù)為綁定執(zhí)行函數(shù)
var req = new XMLHttpRequest();
req.addEventListener("progress", updateProgress, false);
req.addEventListener("load", transferComplete, false);
req.addEventListener("error", transferFailed, false);
req.addEventListener("abort", transferCanceled, false);
req.open();
//注意：必須在open()之前添加事件監(jiān)聽，否則progress(進(jìn)度)事件將不會被觸發(fā)
// 此外XMLHttpRequest還能夠接收二進(jìn)制數(shù)據(jù)，具體操作可以閱讀相關(guān)文檔
var BlobBuilder = window.MozBlobBuilder || window.WebKitBlobBuilder || window.MSBlobBuilder || window.BlobBuilder;
var oReq = new XMLHttpRequest();
oReq.open("GET", "/myfile.png", true);
oReq.responseType = "arraybuffer";
oReq.onload = function(oEvent) {
  var blobBuilder = new BlobBuilder();
  blobBuilder.append(oReq.response);
  var blob = blobBuilder.getBlob("image/png");
  // ...
};
oReq.send();
+++++++++++++++++++++++++++++++++++++++++++++


oReq.setRequestHeader(header,value); //針對post方法需要設(shè)置頭部信息才能有效解析參數(shù)
oReq.setRequestHeader("content-type","application/x-www-form-urlencoded");
oReq.send()方法，如果是get協(xié)議可以為空，但是如果是post協(xié)議，則傳遞給服務(wù)端的參數(shù)需要在這里面指定
xhr.send("foo=bar&lorem=ipsum");  // post表單數(shù)據(jù)可以通過for/in拼接字符串來進(jìn)行
// xhr.send("string"); 
// xhr.send(new Blob()); 
// xhr.send(new Int8Array()); 
// xhr.send({ form: "data" }); 
// xhr.send(document);
oReq.onreadystatechange = fn;  // 在readyStatus屬性狀態(tài)發(fā)生改變時觸發(fā)
// 當(dāng)readyStatus就緒狀態(tài)發(fā)生改變時調(diào)用函數(shù)，狀態(tài)有0-4
xhr.onreadystatechange = function() {
 ?  if(xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200) {
 ? ? ?  // 請求結(jié)束后,在此處寫處理代碼
 ?  }
}
oReq.response // 返回響應(yīng)的正文，它和reponseText的區(qū)別是，response還可以是其他類型的數(shù)據(jù)，不光是文本類型
oReq.responseText // 請求成功會返回一個響應(yīng)的字符串，如果發(fā)送失敗或未發(fā)送則返回null
var xhr = new XMLHttpRequest();
xhr.open("GET", "/server", true);
// If specified, responseType must be empty string or "text"
xhr.responseType = "text";
xhr.onload = function () {
 ?  if (xhr.readyState === xhr.DONE) {
 ? ? ?  if (xhr.status === 200) {
 ? ? ? ? ?  console.log(xhr.response);
 ? ? ? ? ?  console.log(xhr.responseText);
 ? ? ?  }
 ?  }
};
xhr.send(null);
// 返回一個無符號請求響應(yīng)狀態(tài)，比如 200，304,501,404
oReq.status 
其他屬性和方法我們可以打印XMLHttpRequest對象或者參考官方文檔來進(jìn)行使用

需要注意緩存問題和編碼,針對中文可以使用url編碼工具進(jìn)行處理，對于緩存問題可以使用添加時間隨機(jī)數(shù)來解決。

var xhr = new XMLHttpRequest();
// 第三個參數(shù)為true則使用異步I/O處理方式，fase為同步I/O處理方式(阻塞式，在沒有響應(yīng)數(shù)據(jù)返回時程序會等待）
xhr.open("get","index.php?username"+encodeURI("嚴(yán)總")+"&age=30&"+ new Date().getTime(),true);
xhr.send();
xhr.onreadystatechange = function(){
 ? ?if(xhr.readyState == 4){
 ? ? ? ?consoel.log(xhr.responseText);
 ?  } else {
 ? ? ? ?console.log("status:"+xhr.status);
 ? ? ? ?return false;
 ?  }
};

聲明了請求頭之后會自動進(jìn)行編碼，也沒有緩存問題

 ? ?
 ? ?
 ? ?
 ? ?
 ? ?

后臺在接收到數(shù)據(jù)之后，在返回數(shù)據(jù)的時候可以使用json的格式進(jìn)行返回（例如：echo json_encode($arr);)

注意： 后端返回的responseText總是字符串格式，直接使用屬性方法是不能獲取到數(shù)據(jù)的，我們需要對響應(yīng)的數(shù)據(jù)進(jìn)行格式轉(zhuǎn)換。
方法有兩種，如果后端返回的是json格式的，那么XMLHttpRequest接收的時候回轉(zhuǎn)換成字符串形式的，
我們可以使用JSON.parse(str)?和?eval("("+str+")")進(jìn)行轉(zhuǎn)換成json對象的形式，這樣一來我們就可以使用for/in對數(shù)據(jù)進(jìn)行迭代處理。可以動態(tài)更新頁面數(shù)據(jù)

// 此處回提示undefined，因為是字符串形式的數(shù)據(jù)
console.log(xhr.responseText.username);
// 轉(zhuǎn)換方式一
var reponseData = JSON.parse(xhr.responseText);
// 抓換方式二
var reponseData = eval("("+xhr.responseText+")");

  
 ? 
 ? 
 ? 
 ? 
 ? 
  
  
 ? 
 ?
 ?
 ? ?
 

參考文獻(xiàn)：
MDN-Web-DOCS-XMLHttpRequest
W3C.ORG-XMLHttpRequest