摘要：在這個例子中，處理函數為。保證這些方法一定要是大寫字母，否則其他一些瀏覽器比如可能無法處理這個請求。要重點提到的就是請求返回的是一個，所以對獲取數據處理要用。

AJAX是異步的JavaScript和XML（Asynchronous JavaScript And XML）。簡單點說，就是使用 XMLHttpRequest 對象與服務器通信。 它可以使用JSON，XML，HTML和text文本等格式發送和接收數據。AJAX最吸引人的就是它的“異步”特性，也就是說他可以在不重新刷新頁面的情況下與服務器通信，交換數據，或更新頁面。

使用AJAX的兩個特性

在不重新加載頁面的情況下發送請求給服務器。

接受并使用從服務器發來的數據。

function request(){
    let httpRequest = new XMLHttpRequest();
    //要在函數閉包內創建XHR變量，避免被其他request相互覆蓋；
    if(!httpRequest){
        alert("Giving up :( Cannot create an XMLHTTP instance");
        return false;
    }

    httpRequest.onreadystatechange = alertContents;
    httpRequest.open("GET", "test.html");
    httpRequest.send();
}

function alertContents() {
    if (httpRequest.readyState === XMLHttpRequest.DONE) {
      if (httpRequest.status === 200) {
        alert(httpRequest.responseText);
      } else {
        alert("There was a problem with the request.");
      }
    }
  }

let httpRequest = new XMLHttpRequest();

只要 readyState 屬性發生變化，就會調用相應的處理函數。

在這個例子中，處理函數為alertContents。要注意的是，函數名后沒有參數，因為你把一個引用賦值給了函數，而不是真正的調用了它。下面會講關于這個處理函數的具體實現。

還有onload()

onreadystatechange顧名思義，每次state變化的時候都會調用被給的函數，如果只想在狀態為完成的時候被調用，可以使用onload來代替。

不管get還是post，都要先open()。

第一個參數是HTTP請求方法 - 有GET，POST，HEAD以及服務器支持的其他方法。 保證這些方法一定要是大寫字母，否則其他一些瀏覽器（比如FireFox）可能無法處理這個請求。

第二個參數是你要發送的URL。由于安全原因，默認不能調用第三方URL域名。 確保你在頁面中使用的是正確的域名，否則在調用 open() 方法是會有 “權限被拒絕” 錯誤提示。一個容易犯的錯誤是你企圖通過 domain.tld 訪問網站，而不是使用 www.domain.tld。

第三個參數是可選的，用于設置請求是否是異步的。如果設為 true (默認設置)，JavaScript執行會持續，并且在服務器還沒有響應的情況下與頁面進行交互。

上面的就是一個get情景中，用send()的例子

再提供一個post例子

post要設定相應的request header，調用setRequestHeader()

var xhr = new XMLHttpRequest();
xhr.open("POST", "/server", true);

//如果要post就要設定相應的request header
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

xhr.onreadystatechange = function() { //這里定義onreadystatechange前面已經講過了
    if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
        // 請求完畢，做一些處理
    }
}
xhr.send("foo=bar&lorem=ipsum");//正式發送的send()調用

我們知道會把一個函數賦予xhr.onreadystatechange。那么這個函數應該做什么？

首先，函數要檢查請求的狀態。如果狀態的值是 XMLHttpRequest.DONE （對應的值是4），意味著服務器響應收到了并且是沒問題的，然后就可以繼續執行。

if (httpRequest.readyState === XMLHttpRequest.DONE) {
    ...
} else {
   ...
}

readyState對應值

0 UNSENT 還沒open()

1 OPENED 已經open()了

2 HEADERS_RECEIVED 已經send()了

3 LOADING 獲取返回數據中

4 DONE 完成

接下來，檢查HTTP響應的 response code。 可能的響應碼都已經列在表中 W3C響應碼列表。在下面的例子中，我們通過檢查響應碼 200 OK 區別對待成功和不成功的AJAX調用。

if (httpRequest.status === 200) {
   ...
} else {
  ...
}

粗略的響應碼解釋

2XX 成功

3XX 重新導向

4XX 請求有問題

5XX 服務端有問題

一切檢查后，那么怎么獲取返回數據？

httpRequest.responseText – 服務器以文本字符的形式返回

httpRequest.responseXML – 以 XMLDocument 對象方式返回，之后就可以使用JavaScript來處理

我們平常用jquery的ajax都是傳一個對象，來具體自己想做什么樣的請求。
那么實現ajax的時候，也是先要從這傳進來的一個對象里面找參數。處理完了以后就用這些得到的參數去做請求就可以了。

粗略的實現

function ajax(options){
    if(window.XMLHttpRequest){
        let xhr = new XMLHttpRequest;
    }else{
        let xhr = new ActiveXObject();//IE6 and oler
    }

    //從option獲取一些參數
    let method = options.type || "GET";
    let dataType = options.dataType || "application/x-www-form-urlencoded";
    let params = options.data;
    let success = options.success;
    let fail = option.fail;
    ...
    
    //設置onreadystatechange
    xhr.onreadystatechange = function(){
        if(xhr.readyState === 4 && xhr.status === 200){
           //call success
        }else{
            //call fail
        }
    }
    
    //正式進行請求
    if(method == "GET){
        xhr.open("GET",url + "?" + params,true);
        xhr.send();
    }else if(method == "POST"){
        xhr.open("POST",url, true);
        xhr.setRequestHeader("Content-Type", dataType);
        xhr.send(params);
    }else{
       ...other method handler
    }
}

Fetch 是瀏覽器提供的原生 AJAX 接口。這里不做過多介紹。

要重點提到的就是fetch請求返回的是一個Promise，所以對獲取數據處理要用then()。

一些例子

fetch("/data.json")
.then(res => {
  res.text()       // response body (=> 還是返回Promise，需要再then())
  res.json()       // parse via JSON (=> 還是返回Promise，需要再then())
  res.status       //=> 200
  res.statusText   //=> "OK"
  res.redirected   //=> false
  res.ok           //=> true
  res.url          //=> "http://site.com/data.json"
  res.type         //=> "basic"
                   //   ("cors" "default" "error"
                   //    "opaque" "opaqueredirect")

  res.headers.get("Content-Type")
})

參考信息

MDN 什么是AJAX?
MDN XMLHttpRequest
阮一峰ES6指南 Promise對象
fetch cheatsheet