摘要：的交互原理則是請求事件目標從而到達后端事件目標。事件目標對請求事件進行驗證實現業務邏輯，最后可以響應處理結果與前端交互。

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

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

常用方法和屬性：

// 初始化對象，將最先調用該對象的構造函數
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; // 請求加載完成調用此方法
oReq.open("get", "yourFile.txt", true);
oReq.send();
// XMLHttpRequest同樣也支持多種時間綁定，第一個參數為觸發時間，第二個參數為綁定執行函數
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()之前添加事件監聽，否則progress(進度)事件將不會被觸發
// 此外XMLHttpRequest還能夠接收二進制數據，具體操作可以閱讀相關文檔
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方法需要設置頭部信息才能有效解析參數
oReq.setRequestHeader("content-type","application/x-www-form-urlencoded");
oReq.send()方法，如果是get協議可以為空，但是如果是post協議，則傳遞給服務端的參數需要在這里面指定
xhr.send("foo=bar&lorem=ipsum");  // post表單數據可以通過for/in拼接字符串來進行
// xhr.send("string"); 
// xhr.send(new Blob()); 
// xhr.send(new Int8Array()); 
// xhr.send({ form: "data" }); 
// xhr.send(document);
oReq.onreadystatechange = fn;  // 在readyStatus屬性狀態發生改變時觸發
// 當readyStatus就緒狀態發生改變時調用函數，狀態有0-4
xhr.onreadystatechange = function() {
 ?  if(xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200) {
 ? ? ?  // 請求結束后,在此處寫處理代碼
 ?  }
}
oReq.response // 返回響應的正文，它和reponseText的區別是，response還可以是其他類型的數據，不光是文本類型
oReq.responseText // 請求成功會返回一個響應的字符串，如果發送失敗或未發送則返回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);
// 返回一個無符號請求響應狀態，比如 200，304,501,404
oReq.status 
其他屬性和方法我們可以打印XMLHttpRequest對象或者參考官方文檔來進行使用

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

var xhr = new XMLHttpRequest();
// 第三個參數為true則使用異步I/O處理方式，fase為同步I/O處理方式(阻塞式，在沒有響應數據返回時程序會等待）
xhr.open("get","index.php?username"+encodeURI("嚴總")+"&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;
 ?  }
};

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

 ? ?
 ? ?
 ? ?
 ? ?
 ? ?

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

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

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

  
 ? 
 ? 
 ? 
 ? 
 ? 
  
  
 ? 
 ?
 ?
 ? ?
 

參考文獻：
MDN-Web-DOCS-XMLHttpRequest
W3C.ORG-XMLHttpRequest