AJAX原理與CORS跨域

時間  2019-11-08
標籤 ajax 原理 cors 欄目 Ajax 简体版
原文   原文鏈接

ajax做爲前端開發必需的基礎能力之一，你可能會使用它，但並不必定懂得其原理，以及更深刻的服務器通訊相關的知識。在最近兩天的整理過程當中，看了大量的文章，發現本身的後端能力已經限制本身在網絡通訊相關的知識領域的探索，仍是應該儘快補齊短板。javascript

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

Ajax的出現

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

XMLHttpRequest對象和請求

XHR是一個API，爲客戶端提供服務端和客戶端之間通訊的功能，而且不會刷新頁面。它並不只僅能取回XML類型的數據，而能取回全部類型的數據，除了http協議，還支持file和ftp協議。咱們能夠經過其構造函數來建立一個新的XHR對象，這個操做須要在其它全部操做以前完成:html

var xhr = new XMLHttpRequest();

經過控制檯咱們能夠很方便看到XHR的原型鏈：Object -> EventTarget -> XMLHttpRequestEventTarget -> XMLHttpRequest。它擁有原型鏈上和自己的方法和屬性，如今看下咱們經常使用的方法：
圖片描述前端

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

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

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

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

var data = new FormData();
data.append('name', 'Nicholas');
// 接受一個請求主體發送的數據，若是不須要，傳入null
xhr.send(data);

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

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

// 直接傳入表單id
var 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:
------WebKitFormBoundaryjn3q2KKRYrEH55Vz
Content-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,deflate
Accept-Language: 瀏覽器當前設置的語言。// zh-CN,zh;q=0.8,en;q=0.6
Connection: 瀏覽器與服務器之間鏈接的類型。// keep-alive
Cookie: 當前頁面設置的任意Cookie。// JlogDataSource=jomodb
Host: 發出請求的頁面所在域。// gzhxy-cdn-oss-06.gzhxy.baidu.com:8090
Referer: 發出請求的頁面URI。// http://gzhxy-cdn-oss-06.gzhxy.baidu.com:8090/jomocha/index.php?r=tools/offline/index
User-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/html
xhr.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    // 發起響應的URL
responseType    // 響應的類型，用於瀏覽器強行重置響應數據的類型
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分鐘，單位爲ms
xhr.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形參進行處理。但它也有一些缺陷：

  • 訪問的方式是請求js，因此若是域名不安全，則很容易被惡意代碼直接執行並攻擊
  • 沒法檢測是否錯誤，由於js不支持這樣的接口事件，只能超時判斷

上面兩種方式很容易看出，咱們在支持CORS以前，使用的方法只不過是採用img/css/js等不受跨域訪問限制的對象，變相拿到了響應數據，但都有缺陷，因此若是沒有歷史包袱，建議採用XDR或XHR對象來實現跨域訪問。

XHR的兼容性

咱們能夠直接到Can I use這個網站上查詢兼容性問題：
圖片描述

參考資料

  1. MDN - 禁止修改的消息首部：https://developer.mozilla.org...
  2. 理解HTTP之Content-Type：http://homeway.me/2015/07/19/...
  3. MDN - Content-Type：https://developer.mozilla.org...
  4. HTTP請求方法：https://developer.mozilla.org...
  5. Javascript高級程序設計 第21章（Ajax與Comet）
  6. 你真的會使用XHR嗎？ https://segmentfault.com/a/11...
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程