AJAX原理與CORS跨域

知識 10-16

AJAX原理與CORS跨域

ajax作為前端開發必需的基礎能力之一，你可能會使用它，但並不一定懂得其原理，以及更深入的伺服器通信相關的知識。在最近兩天的整理過程中，看了大量的文章，發現自己的後端能力已經限制自己在網路通信相關的知識領域的探索，還是應該儘快補齊短板。

下面我們來聊一聊ajax相關的東西，包括xhr/xdr/ajax/cors/http的一部分內容，其中會拋棄一些被棄用的歷史包袱，如IE6/7等。

Ajax的出現

2005年，Jesse James Garrett提出了Ajax的技術，其全稱為Asynchronous Javascript and XML，Ajax的核心是XMLHttpRequest對象，簡稱XHR，它用於使瀏覽器向伺服器請求額外的數據而不卸載頁面，極大的提高了用戶體驗。在此之前，其實這種技術已經存在並被一些人實現，但並沒有流行也沒有被瀏覽器支持。不過在此之後，IE5第一次引入XHR對象，並支持ajax技術，後續被所有瀏覽器支持。

XMLHttpRequest對象和請求

XHR是一個API，為客戶端提供服務端和客戶端之間通信的功能，並且不會刷新頁面。它並不僅僅能取回XML類型的數據，而能取回所有類型的數據，除了http協議，還支持file和ftp協議。我們可以通過其構造函數來創建一個新的XHR對象，這個操作需要在其它所有操作之前完成:

var xhr = new XMLHttpRequest();

通過控制台我們可以很方便看到XHR的原型鏈：Object -> EventTarget -> XMLHttpRequestEventTarget -> XMLHttpRequest。它擁有原型鏈上和本身的方法和屬性，現在看下我們常用的方法：

AJAX原理與CORS跨域

我們解釋下它的幾個主要方法，我們在創建了新的xhr對象之後，首先要調用它的open()方法：

// 第一個參數可以為get/post等，表示該請求的類型// 第二個參數是請求的url，可以為相對路徑或絕對路徑// 第三個參數代表是否非同步，為true時非同步，為false時同步// 第四五個參數為可選的授權使用的參數，因為安全性不推薦明文使用xhr.open("get", "example.php", true, username, password);

在這裡受同源策略的影響，當第二個參數url跨域的時候會被瀏覽器報安全錯誤。同源策略指的是當前頁面和目標url協議、域名和埠均相同。後面也會講到，除IE之外的瀏覽器通過XHR對象實現跨域請求，只需將url設置為絕對url即可。

當初始化請求完成後，我們調用send()方法發送請求：

var data = new FormData();data.append("name", "Nicholas");// 接受一個請求主體發送的數據，如果不需要，傳入nullxhr.send(data);

當請求的類型為get/head時，send()的參數會被忽略並置為null，send()傳遞的參數會影響到我們請求的頭部content-type的默認值，該欄位代表返回的資源內容的類型，用於瀏覽器處理，如果沒有設置或在一些場景下，瀏覽器會進行MIME嗅探來確定怎麼處理返回的資源。

在XHR2級中定義了FormData數據，用於常見的類表單數據序列化：

// 直接傳入表單idvar data = new FormData(document.getElementById("user-form"));// 創建類表單數據var data = new FormData();data.append("name", "Nicholas");// `FormData`可以直接被send()調用，會自動修改xhr的content-type頭部xhr.send(data);// 請求頭部的content-type: multipart/form-data; boundary=----WebKitFormBoundaryjn3q2KKRYrEH55Vz// 請求的上傳數據 Request Payload:------WebKitFormBoundaryjn3q2KKRYrEH55VzContent-Disposition: form-data; name="name"Nicholas------WebKitFormBoundaryjn3q2KKRYrEH55Vz--

FormData常用的方法有append/delete/entries/forEach/get/getAll/has/keys/set/values，都是常用的跟數組類似的方法，不再解釋。

請求方法

GET是最常見的請求類型，可以將查詢字元串參數添加到URL尾部，對XHR而言，該查詢字元串必須經過正確編碼，每個鍵值對必須使用encodeURIComponent()進行編碼，鍵值對之間由&分割：

// 封裝序列化鍵值對function addURLParam(url, name, value) { url += (url.indexOf("?") === -1 ? "?" : "&"; url += encodeURIComponent(name) + "=" + encodeURIComponent(value); return url;
}

POST請求使用頻率僅次於GET請求，通常發送較多數據，且格式不限，數據傳遞給send()作為參數。

HTTP一共規定了九種請求方法，每一個動詞代表不同的語義，但是常用的只有上面兩種：

- OPTIONS：返回伺服器針對特定資源所支持的HTTP請求方法。也可以利用向Web伺服器發送"*"的請求來測試伺服器的功能性。
- HEAD：向伺服器索要與GET請求相一致的響應，只不過響應體將不會被返回。這一方法可以在不必傳輸整個響應內容的情況下，就可以獲取包含在響應消息頭中的元信息。
- GET：向特定的資源發出請求。
- POST：向指定資源提交數據進行處理請求（例如提交表單或者上傳文件）。數據被包含在請求體中。POST請求可能會導致新的資源的創建和/或已有資源的修改。
- PUT：向指定資源位置上傳其最新內容。
- DELETE：請求伺服器刪除Request-URI所標識的資源。
- TRACE：回顯伺服器收到的請求，主要用於測試或診斷。
- CONNECT：HTTP/1.1協議中預留給能夠將連接改為管道方式的代理伺服器。 - PATCH: 用於對資源進行部分修改

HTTP頭部信息

每個HTTP請求和響應都帶有頭部信息，xhr對象允許我們操作部分頭部信息。我們可以通過xhr.setRequestHeader()方法來設置自定義的頭部信息或者修改瀏覽器默認的正常頭部信息。常用的請求頭部：

// 下面的實例是從我本地的一次請求取出的Accept: 瀏覽器能夠處理的內容類型。// */*Accept-Charset: 瀏覽器能夠顯示的字符集。// 未取到Accept-Encoding: 瀏覽器能夠處理的壓縮編碼。// gzip,deflateAccept-Language: 瀏覽器當前設置的語言。// zh-CN,zh;q=0.8,en;q=0.6Connection: 瀏覽器與伺服器之間連接的類型。// keep-aliveCookie: 當前頁面設置的任意Cookie。// JlogDataSource=jomodbHost: 發出請求的頁面所在域。// gzhxy-cdn-oss-06.gzhxy.baidu.com:8090Referer: 發出請求的頁面URI。// http://gzhxy-cdn-oss-06.gzhxy.baidu.com:8090/jomocha/index.php?r=tools/offline/indexUser-Agent: 瀏覽器的用戶代理字元串。// Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.100 Safari/537.36

我們一般不修改瀏覽器正常的頭部信息，可能會影響到伺服器響應。如果需要可以通過xhr.setRequestHeader()進行修改：

// 傳入頭部鍵值對，鍵值不區分大小寫，如果多次設置，則追加// 此時請求頭部的content-type: application/json, text/htmlxhr.setRequestHeader("content-type", "application/json");xhr.setRequestHeader("content-type", "application/json");

設置頭部信息需要在open()之後，send()之前進行調用。響應的頭部信息在後端處理，不在此處講解。有一部分請求頭部信息不允許設置，如Accept-Encoding, Cookie等。

在請求返回後，我們可以獲取到響應頭部：

// 獲取指定項的響應頭xhr.getResponseHeader("content-type"); // application/json;charset=utf-8// 獲取所有的響應頭部信息xhr.getAllResponseHeaders();

這裡簡單說下content-type值，指的是請求和響應的HTTP內容類型，影響到伺服器和瀏覽器對數據的處理方式，默認為text/html，常用的如：

// 包含資源類型，字元編碼，邊界字元串三個參數，可選填text/html;charset=utf-8 // html標籤文本text/plain // 純文本text/css // css文件text/javascript // js文件// 普通的表單數據，可以通過表單標籤的enctype屬性指定application/x-www-form-urlencode// 發送文件的POST包，包過大需要分片時使用`boundary`屬性分割數據作邊界multipart/form-data; boundary=something// json數據格式application/json// xml類型的標記語言application/xml

XHR對象的響應

我們現在對請求的發起很了解了，接著看下如何拿到響應數據。如果我們給open()傳遞的第三個參數是true，則代表為同步請求，那麼js會被阻塞直到拿到響應，而如果為false則是非同步請求，我們只需要綁定xhr.onreadystatechange()事件監聽響應即可。最上面的圖已經說明了readystate的值含義，所以我們可以：

// xhr v1 的寫法，檢測readystate的值，為4則說明數據準備完畢，需要在open()前定義
xhr.onreadystatechange = function () { if (xhr.readyState === 4） { if (xhr.status === 200 || xhr.status === 304) {
console.log(xhr.responseText);
} else {
console.log(xhr.statusText);
}
}
}
// xhr v2 的寫法，onload()事件說明數據準備完畢
xhr.onload = function () { if (xhr.status === 200 || xhr.status === 304) {
console.log(xhr.responseText);
} else {
console.log(xhr.statusText);
}
}

xhr對象的響應數據中包含幾個屬性：

response // 響應的數據responseURL // 發起響應的URLresponseType // 響應的類型，用於瀏覽器強行重置響應數據的類型responseText // 如果為普通文本，則在這顯示responseXML // 如果為xml類型文本，在這裡顯示

數據會出現在responseText/responseXML中的哪一個，取決於伺服器返回的MIME類型，當然我們也有一些方式在瀏覽器端設置如何處理這些數據：

// xhr v1 的寫法，設置響應資源的處理類型
xhr.overrideMimeType("text/xml");// xhr v2 的寫法，可用值為 arraybuffer/blob/document/json/text
xhr.responseType = "document";

響應數據相關的屬性默認為null / ""，只有當請求完成並被正確解析的時候才會有值，取決於responseType的值，來確定response/responseText/responseXML誰最終具有值。

XHR的高級功能

在xhr v2里提供了超時和進度事件。

超時

xhr.timeout = 1000; // 1分鐘，單位為msxhr.ontimeout = function () {};

在請求send()之後開始計時，等待timeout時長後，如果沒有收到響應，則觸發ontimeout()事件，超時會將readystate=4，直接觸發onreadystatechange()事件。

請求進度

像上圖所示，xhr v2定義了不同的進度事件：loadstart/progress/error/abort/load/loadend，這其中我們已經說過了onload()事件為內容載入完成可用。現在說一下onprogress()進度事件：

xhr.onprogress = function (event) { if (event.lengthComputable) {
console.log(event.loaded / event.total);
}
}

該事件會接收一個event對象，其target屬性為該xhr對象，lengthComputable屬性為total size是否已知，即是否可用進度信息，loaded屬性為已經接收的位元組數，total為總位元組數。該事件會在數據接收期間不斷觸發，但間隔不確定。

跨域CORS

提到XHR對象，我們就會講到跨域問題，它是為了預防某些惡意行為的安全策略，但有時候我們需要跨域來實現某些功能。需要注意的是跨域並不僅僅是前端單方面的事情，它需要後端代碼進行配合，我們只是通過一些方式跳過了瀏覽器的阻攔。

對那些可能對伺服器數據產生副作用的 HTTP 請求方法（特別是 GET 以外的 HTTP 請求，或者搭配某些 MIME 類型的 POST 請求），瀏覽器必須首先使用 OPTIONS 方法發起一個預檢請求（preflight request），從而獲知服務端是否允許該跨域請求。伺服器確認允許之後，才發起實際的 HTTP 請求。

CORS(Cross-Origin Resource Sharing, 跨域資源共享)的思想是瀏覽器和服務端通過頭部信息來進行溝通確認是否給予響應。如：

Origin: http://www.baidu.com // 瀏覽器的頭部信息// 如果服務端認可這個域名的跨域請求，如下設置就可跨域訪問資源Access-Control-Allow-Origin: http://www.baidu.com

如上就可以實現最簡單的跨域訪問，但是此時不能攜帶任何的cookie，如果我們需要傳遞cookie進行身份認證，需要設置：

xhr.withCredentials = true; // 瀏覽器端Access-Control-Allow-Credentials: true; // 服務端

這樣我們就可以傳遞認證信息了，但如果允許認證，Access-Control-Allow-Origin不能設置為*，而一定是具體的域名信息。

現在的瀏覽器都對CORS有了實現，如IE使用XDomainRequest對象，其它瀏覽器使用XMLHttpRequest對象。所以在此之前有很多奇技淫巧，如通過jsonp/圖像 Ping方法都不再詳述，而且其都需要服務端配合併且有很多局限性。

IE實現： XDomainRequest

var xdr = new XDomainRequest();
xdr.open("get", "http://www.site.com/page");
xdr.send(null);

XDR區別於XHR：

不能傳輸cookie
只能設置請求頭部的content-type
不能訪問響應頭部信息
只支持get/post方法

通過這些區別可以阻止一部分的CSRF(Cross-Site Request Forgery，跨站點請求偽造)和XSS(Cross-Site Scripting，跨站點腳本)。

XDR與XHR非常相似，區別有幾點：

open()方法只接受兩個參數，請求類型和URL
只允許非同步請求
響應完成觸發onload()事件，但我們只能訪問responseText原始文本，並且無法獲取響應的status.
異常事件都會觸發error事件，並且無錯誤信息可用。

其餘瀏覽器實現： XMLHttpRequest

其餘瀏覽器通過XHR對象直接實現了CORS，你只需要做的就是open()方法中傳入一個絕對URL。

xhr.open("get", "http://www.site.com/page", true);

相對於普通的XHR對象，CORS-XHR依然有部分限制：

不能使用setRequestHeader()定義頭部
不能傳遞cookie
調用getAllResponseHeaders()，結果為空

其餘跨域方法

上面的兩種方法已經很成熟了，但是仍然有一部分方法可以跨域，比如圖像Ping：

var img = new Image();
img.onload = img.onerror = function () { console.log("done");
}
img.src = "http://www.site.com/test?name=Nicholas";

這種方式常用於服務端統計廣告的點擊次數，其缺陷為：

只能是GET請求
單向通信，無法獲取響應文本

另外還有JSONP：

function handleResponse(response) { console.log(response.ip, response.city);
}var script = document.createElement("script");
script.src = "http://freegeoip.net/json?callback=handleResponse";document.body.insertBefore(script, document.body.firstChild);

這種方式通過和伺服器配合，跨域請求一個js文件並被伺服器處理後傳回：

handleResponse({"name": "Nicholas"});

然後直接在瀏覽器調用了該函數，傳回的數據被當做response形參進行處理。但它也有一些缺陷：