摘要：發(fā)送后等待服務(wù)端響應(yīng)，響應(yīng)是以觸發(fā)事件來(lái)通知，隨后通過(guò)請(qǐng)求對(duì)象實(shí)例拿到狀態(tài)以及響應(yīng)的內(nèi)容。表示服務(wù)器響應(yīng)內(nèi)容的文本形式。而是在調(diào)用發(fā)出后，被調(diào)用者通過(guò)觸發(fā)事件，調(diào)用事件處理回調(diào)函數(shù)。

AJAX即“Asynchronous JavaScript and XML”（異步的JavaScript與XML技術(shù)），指的是一套綜合了多項(xiàng)技術(shù)的瀏覽器端網(wǎng)頁(yè)開發(fā)技術(shù)，包含了HTML、CSS、JavaScript、DOM、XML等技術(shù)。Aiax 只是一個(gè)哥們“發(fā)明”的縮寫，這個(gè)新術(shù)語(yǔ)用來(lái)描述一種使用現(xiàn)有技術(shù)集合的一個(gè)名稱。多項(xiàng)技術(shù)中最重要的是 XMLHttpRequest 對(duì)象，稍后會(huì)介紹到它。

如果不使用 Ajax，仔細(xì)觀察一個(gè)Form的提交，你就會(huì)發(fā)現(xiàn)，一旦用戶點(diǎn)擊“Submit”按鈕，表單開始提交，瀏覽器就會(huì)刷新頁(yè)面，然后會(huì)跳到新頁(yè)面里告訴你操作是成功了還是失敗了。如果失敗了，還要返回表單填寫頁(yè)，有些信息會(huì)丟失，需要重新填寫，這對(duì)用戶體驗(yàn)極其不友好。

這是Web的運(yùn)作原理：一次HTTP請(qǐng)求對(duì)應(yīng)一個(gè)頁(yè)面。

如果要讓用戶留在當(dāng)前頁(yè)面中，同時(shí)發(fā)出新的HTTP請(qǐng)求，就必須用JavaScript發(fā)送這個(gè)新請(qǐng)求，接收到數(shù)據(jù)后，再用JavaScript更新頁(yè)面，這樣一來(lái)，用戶就感覺(jué)自己仍然停留在當(dāng)前頁(yè)面，數(shù)據(jù)卻可以不斷地更新。

也就是說(shuō)，當(dāng)使用了 Ajax 后，可以在不重新刷新頁(yè)面的情況下與服務(wù)器通信，交換數(shù)據(jù)，更新頁(yè)面， 這樣能夠快速地將數(shù)據(jù)更新呈現(xiàn)在用戶界面上，這使得程序能夠更快地回應(yīng)用戶的操作。

可以利用 Ajax 的特性做如下事情：

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

接受并使用從服務(wù)器響應(yīng)的數(shù)據(jù)。

使用 AJAX 技術(shù)中的 XMLHttpRequest 對(duì)象與服務(wù)器通信，交換數(shù)據(jù)。數(shù)據(jù)的格式可以使用JSON，XML，HTML和文本等多種格式發(fā)送和接收。盡管X在Ajax中代表XML, 但由于JSON的許多優(yōu)勢(shì)，更加輕量以及是Javascript的一部分，目前JSON的使用比XML更加普遍。

JSON(JavaScript Object Notation) 是一種輕級(jí)的數(shù)據(jù)交換格式。JSON實(shí)際上是JavaScript的一個(gè)子集。但是和JavaScript的語(yǔ)法稍微有些不同，有屬于JSON自己的語(yǔ)法。

JSON構(gòu)建于兩種形式：

無(wú)序的“‘名稱/值’對(duì)”集合
一個(gè)對(duì)象以“{”（左括號(hào)）開始，“}”（右括號(hào)）結(jié)束。每個(gè)“名稱”后跟一個(gè)“:”（冒號(hào)）；“‘名稱/值’ 對(duì)”之間使用“,”（逗號(hào)）分隔。

值的有序列表
一個(gè)數(shù)組以“[”（左中括號(hào)）開始，“]”（右中括號(hào)）結(jié)束。值之間使用“,”（逗號(hào)）分隔。

在JSON中值支持以下幾種數(shù)據(jù)類型：

number：和JavaScript的number完全一致，在JSON中數(shù)字不能以0開頭。

boolean：JavaScript的true或false；

string：JavaScript的string；

null：JavaScript的null；

array：JavaScript的Array表示方式——[]；在JSON中結(jié)尾不能有逗號(hào)。

object：JavaScript的{ ... }表示方式。在JSON中結(jié)尾不能有逗號(hào)，key值必須加上雙引號(hào)。

在JavaScript中，可以直接使用JSON，JavaScript內(nèi)置了JSON的解析。

JSON 對(duì)象

JSON對(duì)象定義在全局，該對(duì)象包含了兩個(gè)方法，除了這兩個(gè)方法, JSON這個(gè)對(duì)象本身并沒(méi)有其他作用，也不能被調(diào)用或者作為構(gòu)造函數(shù)調(diào)用。

JSON.stringify()

將 JavaScript 中的對(duì)象或數(shù)組序列化成JSON字符串。簡(jiǎn)單來(lái)說(shuō) JSON 是 JavaScript 對(duì)象的字符串表示法，它使用文本表示一個(gè) JS 對(duì)象的信息，本質(zhì)是一個(gè)字符串。

序列化將對(duì)象的狀態(tài)信息轉(zhuǎn)換為可以存儲(chǔ)或傳輸?shù)男问降倪^(guò)程。

例如在 JavaScript 中定義的對(duì)象：

let obj = {a:1,b:2}

此對(duì)象存在于內(nèi)存中，并不能將期結(jié)構(gòu)存儲(chǔ)在cookie或localStorage或傳遞給后端。而此時(shí)就需要調(diào)用此方法序列換為一個(gè) JSON 字符串。

console.log(JSON.stringify(obj)); // {"a":1,"b":2}

JSON.parse()
將 JSON 字符串反序列化成 JavaScript 中的對(duì)象或數(shù)組。JSON 字符串本身只是一個(gè)字符串，不能通過(guò)屬性名的方式獲取對(duì)應(yīng)的值。要轉(zhuǎn)換為對(duì)象就可以使用 key 來(lái)取值。

反序列化將可以存儲(chǔ)或傳輸?shù)男问睫D(zhuǎn)換為對(duì)象的過(guò)程。

例如從后端拿到一個(gè) JSON 字符串 ：

let objStr = "{"a":1,"b":2}"

此時(shí)不能使用 objStr.a 取到數(shù)值1，因?yàn)?objStr 本身只是一個(gè)字符串值，并不是對(duì)象。

需要把JSON 字符串轉(zhuǎn)成可用的對(duì)象：

console.log(JSON.parse(objStr)); // {"a":1,"b":2}

Ajax 中的Asynchronous 是異步的意思，結(jié)合 Ajax 可以和服務(wù)器進(jìn)行通信，可以說(shuō)Ajax是用JavaScript執(zhí)行異步的網(wǎng)絡(luò)請(qǐng)求。

所謂的異步就是，一個(gè)異步過(guò)程調(diào)用發(fā)出后，調(diào)用者不會(huì)立刻得到結(jié)果。而是在 調(diào)用 發(fā)出后，被調(diào)用者通過(guò)狀態(tài)、通知來(lái)通知調(diào)用者，或通過(guò)回調(diào)函數(shù)處理這個(gè)調(diào)用。

其中DOM事件，定時(shí)器就是典型的異步操作。拿定時(shí)器舉例，當(dāng)調(diào)用 setTimeout 函數(shù)時(shí)候，就發(fā)起了一個(gè)異步操作，此時(shí)不會(huì)立馬得到反饋，而到了設(shè)置的時(shí)間，會(huì)調(diào)用傳入的回調(diào)函數(shù)，一旦回調(diào)函數(shù)執(zhí)行就得到通知說(shuō)明異步完成了。

setTimeout(function(){
    console.log("執(zhí)行此回調(diào)函數(shù)，異步完成得到通知，該干嘛干嘛！?。?);
}, 1000)

與之對(duì)應(yīng)的還有一個(gè)同步的概念，所謂同步，就是在發(fā)出一個(gè)調(diào)用時(shí)，在沒(méi)有得到結(jié)果之前，該調(diào)用就不返回。但是一旦調(diào)用返回，就得到返回值了。由調(diào)用者主動(dòng)等待這個(gè)調(diào)用的結(jié)果。

比如拿一個(gè) JavaScript 中函數(shù)調(diào)用舉例：

var arr = [1,2,3,4,5,6,7,8];

arr.map((item) => {
    return item * 2
})

arr.forEach((item) => {
    return item * 2
})

上述代碼中只有 map 指向之后，得到了結(jié)果，才能繼續(xù)調(diào)用 forEach, 這是一個(gè)同步調(diào)用的過(guò)程。

在使用 Ajax 時(shí)候，發(fā)出的是一個(gè)異步請(qǐng)求，要通過(guò)調(diào)用函數(shù)獲得響應(yīng)。

使用 JavaScript 創(chuàng)建一個(gè)請(qǐng)求對(duì)象實(shí)例，調(diào)用該實(shí)例下的方法，設(shè)置好請(qǐng)求的URL地址和請(qǐng)求數(shù)據(jù)，發(fā)送異步請(qǐng)求。發(fā)送后等待服務(wù)端響應(yīng)，響應(yīng)是以觸發(fā)事件來(lái)通知，隨后通過(guò)請(qǐng)求對(duì)象實(shí)例拿到HTTP狀態(tài)以及響應(yīng)的內(nèi)容。

完成一次請(qǐng)求，代碼示意如下所示

let xhr = new XMLHttpRequest;

console.log(xhr.readyState); // 0 UNSENT 創(chuàng)建實(shí)例對(duì)象，尚未調(diào)用open();

xhr.open("GET","http://kuapi.wykiss.cn/api?json=true",true);

console.log(xhr.readyState); // 1 OPENED open()方法已成功調(diào)用。

// 當(dāng)readyState狀態(tài)發(fā)生變化時(shí)，觸發(fā)此事件

xhr.onreadystatechange = function () {
    console.log(xhr.readyState);
    if(xhr.readyState === 2){ // 2 HEADERS_RECEIVED 可以獲取到響應(yīng)頭信息
        console.log("響應(yīng)頭信息為:",xhr.getAllResponseHeaders())
    }else if(xhr.readyState === 3){ // 3 LOADING 正在接收部分響應(yīng)內(nèi)容 
        console.log("接收的部分內(nèi)容是:",xhr.response)
    }else if(xhr.readyState === 4) { // 4 DONE 請(qǐng)求操作已經(jīng)完成，響應(yīng)的內(nèi)容全部接受完成
        console.log("接收全部?jī)?nèi)容是:",xhr.response) 
    }
}

// 請(qǐng)求操作完成 觸發(fā)的事件
xhr.onload = function () {
    console.log("請(qǐng)求操作完成，觸發(fā)此事件")
    console.log("可以直接獲取響應(yīng)的全部?jī)?nèi)容",xhr.response)
}

xhr.send();

咋眼一看，內(nèi)容還挺多，分解每一個(gè)知識(shí)點(diǎn)如下。

XMLHttpRequest 是規(guī)范制定的API，已經(jīng)被現(xiàn)代瀏覽器廣泛使用，它為客戶端提供了在客戶端和服務(wù)器之間傳輸數(shù)據(jù)的功能，是Ajax技術(shù)的核心所在。

全局會(huì)提供一個(gè) XMLHttpRequest 構(gòu)造函數(shù)來(lái)初始化一個(gè)請(qǐng)求實(shí)例對(duì)象。

var xhr = new XMLHttpRequest();

此對(duì)象上會(huì)有多個(gè)屬性和方法。

只讀屬性，xhr.readyState 記錄了請(qǐng)求實(shí)例對(duì)象運(yùn)行過(guò)程中所處的狀態(tài)，使用數(shù)字來(lái)表示。以下是每個(gè)數(shù)字代表的含義：

兩個(gè)都是只讀屬性，存的是服務(wù)器的響應(yīng)內(nèi)容。 responseText表示服務(wù)器響應(yīng)內(nèi)容的文本形式。

可讀可寫屬性，xhr.responseType 表示響應(yīng)的類型, 缺省為空字符串, 可取 "arraybuffer" , "blob" , "document" , "json" , and "text" 共五種類型。
當(dāng)將responseType設(shè)置為一個(gè)特定的類型時(shí)，你需要確保服務(wù)器所返回的類型和你所設(shè)置的返回值類型是兼容的。那么如果兩者類型不兼容，服務(wù)器返回的數(shù)據(jù)變成了null，即使服務(wù)器返回了數(shù)據(jù)。還有一個(gè)要注意的是，給一個(gè)同步請(qǐng)求設(shè)置responseType會(huì)拋出一個(gè)InvalidAccessError 的異常。

xhr.responseURL 返回ajax請(qǐng)求最終的URL, 如果請(qǐng)求中存在重定向, 那么responseURL表示重定向之后的URL。

只讀屬性。xhr.status存的是數(shù)字狀態(tài)碼，是標(biāo)準(zhǔn)的HTTML狀態(tài)碼。在請(qǐng)求完成前，status的值為0。如果請(qǐng)求出錯(cuò)，瀏覽器返回的 status 也為0。如果服務(wù)器響應(yīng)中沒(méi)有明確指定status碼， status碼將會(huì)默認(rèn)為200。

只讀屬性。xhr.status存的是服務(wù)器返回的狀態(tài)短語(yǔ)。這個(gè)屬性包含了返回狀態(tài)對(duì)應(yīng)的文本信息，例如"OK"或是"Not Found"。

xhr.open() 方法初始化一個(gè)請(qǐng)求。

語(yǔ)法：

xhr.open(method, url)
xhr.open(method, url, async)

method 要使用的HTTP方法，比如 「GET」、「POST」、「PUT」、「DELETE」等。常用的是「GET」、「POST」請(qǐng)求方式。其他的方法后端需要特別的支持。

接下來(lái)討論的是在瀏覽器應(yīng)用層面中GET和POST發(fā)送數(shù)據(jù)的不同。

- GET產(chǎn)生的URL地址可以被Bookmark，而POST不可以。
- GET請(qǐng)求只能進(jìn)行url編碼，而POST支持多種編碼方式。
- GET請(qǐng)求參數(shù)會(huì)被完整保留在瀏覽器歷史記錄里，而POST中的參數(shù)不會(huì)被保留。
- GET請(qǐng)求在URL中傳送的參數(shù)是有長(zhǎng)度限制的，而POST么有。
- GET比POST更不安全，因?yàn)閰?shù)直接暴露在URL上，所以不能用來(lái)傳遞敏感信息。
- GET參數(shù)通過(guò)URL傳遞，POST放在Request body中。

url 發(fā)送請(qǐng)求的URL地址。如果發(fā)送的是 get 請(qǐng)求要把數(shù)據(jù)寫在地址欄的后面發(fā)送給后端。例如：

http://kuapi.wykiss.cn/api?js...

async 可選參數(shù)。默認(rèn)為true，表示執(zhí)行是不是執(zhí)行異步操作。true，為異步，false，為同步。當(dāng)設(shè)置false時(shí)，瀏覽器會(huì)出現(xiàn)一個(gè)警告。

異步請(qǐng)求發(fā)出后，調(diào)用者不會(huì)立刻得到結(jié)果。而是在 調(diào)用 發(fā)出后，被調(diào)用者通過(guò)觸發(fā)事件，調(diào)用事件處理回調(diào)函數(shù)。在沒(méi)有得到后端返回的結(jié)果之前，異步操作之后的代碼會(huì)繼續(xù)執(zhí)行。

// Ajax 發(fā)出異步請(qǐng)求
// ..... 代碼省略
console.log("沒(méi)得到結(jié)果，我先執(zhí)行");

同步請(qǐng)求發(fā)出后，在沒(méi)有得到結(jié)果之前，該調(diào)用就不返回。這就意味著，后續(xù)的代碼不能被執(zhí)行，只有等到同步調(diào)用結(jié)束后得到了結(jié)果，才能繼續(xù)執(zhí)行代碼。

// Ajax 發(fā)出同步請(qǐng)求
// ..... 代碼省略
console.log("只有同步操作完成后，我才能執(zhí)行");

xhr.send() 方法用于發(fā)送 HTTP 請(qǐng)求。如果是異步請(qǐng)求（默認(rèn)為異步請(qǐng)求），則此方法會(huì)在請(qǐng)求發(fā)送后立即返回，接著繼續(xù)執(zhí)行send后面的代碼；如果是同步請(qǐng)求，則此方法直到服務(wù)端響應(yīng)結(jié)束后全部拿到響應(yīng)的數(shù)據(jù)后才會(huì)返回。

xhr.send() 方法接受一個(gè)可選的參數(shù)，其作為請(qǐng)求主體，發(fā)送 post 時(shí)會(huì)用到；如果請(qǐng)求方法是 GET，則應(yīng)將請(qǐng)求主體設(shè)置為 null。

注意：請(qǐng)求方法為 post 時(shí)，要在請(qǐng)求頭（headers）中的 Content-Type 設(shè)置消息主體編碼方式，這樣服務(wù)端通常是根據(jù)請(qǐng)求頭（headers）中的 Content-Type 字段來(lái)獲知請(qǐng)求中的消息主體是用何種方式編碼，再對(duì)主體進(jìn)行解析。

application/x-www-form-urlencoded

Content-Type 被指定為 application/x-www-form-urlencoded；提交的數(shù)據(jù)按照 key1=val1&key2=val2 的方式進(jìn)行編碼，key 和 val 都進(jìn)行了 URL 轉(zhuǎn)碼。大部分服務(wù)端語(yǔ)言都對(duì)這種方式有很好的支持。例如 PHP 中，$_ POST[" json "] 可以獲取到 true 的值，$_POST["country"] 可以得到 中國(guó) 值。

xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send("json=true&country=中國(guó)");

關(guān)于URL編碼

URL編碼是一種瀏覽器用來(lái)打包表單輸入的格式，瀏覽器從表單中獲取所有的name和其對(duì)應(yīng)的value，將他們以name/value編碼方式作為URL的一部分或者分離的發(fā)送到服務(wù)器上。在 ajax 中要手動(dòng)設(shè)置 Content-Type 為 application/x-www-form-urlencoded。

URL編碼規(guī)則：每對(duì)name/value由&分開，每對(duì)來(lái)自表單的name/value用=分開。如果用戶沒(méi)有輸入值的那個(gè)name依舊會(huì)出現(xiàn)不過(guò)就是沒(méi)有值。URL編碼是在字符ASCII碼的十六進(jìn)制數(shù)的前面加上%。例如：中國(guó) 被轉(zhuǎn)成了 %E4%B8%AD%E5%9B%BD 。

在ajax請(qǐng)求操作完成后觸發(fā), 觸發(fā)時(shí)機(jī)在 readyState==4 狀態(tài)之后，這時(shí)候返回的內(nèi)容已全部接受。

xhr.onload = function(){
  var s = xhr.status;
  if((s >= 200 && s < 300) || s == 304){
    var resp = xhr.responseText;
    //TODO ...
  }
}

在readystate記錄的狀態(tài)改變時(shí)觸發(fā)。onreadystatechange 方法會(huì)被觸發(fā)4次。通常在事件處理函數(shù)中判斷 readystate 為4的情況下，才算全部接受到內(nèi)容。

xhr.onreadystatechange = function(e){
  if(xhr.readyState==4){
    var s = xhr.status;
    if((s >= 200 && s < 300) || s == 304){
      var resp = xhr.responseText;
      //TODO ...
    }
  }
}

以上是對(duì)Ajax知識(shí)點(diǎn)的總結(jié)，如有問(wèn)題，歡迎指正！

擴(kuò)展閱讀：

readyState狀態(tài)描述

https://xhr.spec.whatwg.org/#states

關(guān)于URL編碼

http://www.ruanyifeng.com/blog/2010/02/url_encoding.html

四種常見(jiàn)的 POST 提交數(shù)據(jù)方式:

https://imququ.com/post/four-ways-to-post-data-in-http.html