摘要：在這個(gè)例子中，處理函數(shù)為。保證這些方法一定要是大寫字母，否則其他一些瀏覽器比如可能無法處理這個(gè)請(qǐng)求。要重點(diǎn)提到的就是請(qǐng)求返回的是一個(gè)，所以對(duì)獲取數(shù)據(jù)處理要用。

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

使用AJAX的兩個(gè)特性

在不重新加載頁面的情況下發(fā)送請(qǐng)求給服務(wù)器。

接受并使用從服務(wù)器發(fā)來的數(shù)據(jù)。

function request(){
    let httpRequest = new XMLHttpRequest();
    //要在函數(shù)閉包內(nèi)創(chuàng)建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 屬性發(fā)生變化，就會(huì)調(diào)用相應(yīng)的處理函數(shù)。

在這個(gè)例子中，處理函數(shù)為alertContents。要注意的是，函數(shù)名后沒有參數(shù)，因?yàn)槟惆岩粋€(gè)引用賦值給了函數(shù)，而不是真正的調(diào)用了它。下面會(huì)講關(guān)于這個(gè)處理函數(shù)的具體實(shí)現(xiàn)。

還有onload()

onreadystatechange顧名思義，每次state變化的時(shí)候都會(huì)調(diào)用被給的函數(shù)，如果只想在狀態(tài)為完成的時(shí)候被調(diào)用，可以使用onload來代替。

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

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

第二個(gè)參數(shù)是你要發(fā)送的URL。由于安全原因，默認(rèn)不能調(diào)用第三方URL域名。 確保你在頁面中使用的是正確的域名，否則在調(diào)用 open() 方法是會(huì)有 “權(quán)限被拒絕” 錯(cuò)誤提示。一個(gè)容易犯的錯(cuò)誤是你企圖通過 domain.tld 訪問網(wǎng)站，而不是使用 www.domain.tld。

第三個(gè)參數(shù)是可選的，用于設(shè)置請(qǐng)求是否是異步的。如果設(shè)為 true (默認(rèn)設(shè)置)，JavaScript執(zhí)行會(huì)持續(xù)，并且在服務(wù)器還沒有響應(yīng)的情況下與頁面進(jìn)行交互。

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

再提供一個(gè)post例子

post要設(shè)定相應(yīng)的request header，調(diào)用setRequestHeader()

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

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

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

我們知道會(huì)把一個(gè)函數(shù)賦予xhr.onreadystatechange。那么這個(gè)函數(shù)應(yīng)該做什么？

首先，函數(shù)要檢查請(qǐng)求的狀態(tài)。如果狀態(tài)的值是 XMLHttpRequest.DONE （對(duì)應(yīng)的值是4），意味著服務(wù)器響應(yīng)收到了并且是沒問題的，然后就可以繼續(xù)執(zhí)行。

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

readyState對(duì)應(yīng)值

0 UNSENT 還沒open()

1 OPENED 已經(jīng)open()了

2 HEADERS_RECEIVED 已經(jīng)send()了

3 LOADING 獲取返回?cái)?shù)據(jù)中

4 DONE 完成

接下來，檢查HTTP響應(yīng)的 response code。 可能的響應(yīng)碼都已經(jīng)列在表中 W3C響應(yīng)碼列表。在下面的例子中，我們通過檢查響應(yīng)碼 200 OK 區(qū)別對(duì)待成功和不成功的AJAX調(diào)用。

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

粗略的響應(yīng)碼解釋

2XX 成功

3XX 重新導(dǎo)向

4XX 請(qǐng)求有問題

5XX 服務(wù)端有問題

一切檢查后，那么怎么獲取返回?cái)?shù)據(jù)？

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

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

我們平常用jquery的ajax都是傳一個(gè)對(duì)象，來具體自己想做什么樣的請(qǐng)求。
那么實(shí)現(xiàn)ajax的時(shí)候，也是先要從這傳進(jìn)來的一個(gè)對(duì)象里面找參數(shù)。處理完了以后就用這些得到的參數(shù)去做請(qǐng)求就可以了。

粗略的實(shí)現(xiàn)

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

    //從option獲取一些參數(shù)
    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;
    ...
    
    //設(shè)置onreadystatechange
    xhr.onreadystatechange = function(){
        if(xhr.readyState === 4 && xhr.status === 200){
           //call success
        }else{
            //call fail
        }
    }
    
    //正式進(jìn)行請(qǐng)求
    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 接口。這里不做過多介紹。

要重點(diǎn)提到的就是fetch請(qǐng)求返回的是一個(gè)Promise，所以對(duì)獲取數(shù)據(jù)處理要用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對(duì)象
fetch cheatsheet