XMLHttpRequest

XMLHttpRequest (XHR), 是最常見的 JavaScript HTTP Client，
常見於 Web 應用、Debug、API 測試… 😆。

就算不會 JavaScript，閱讀本篇後，您將擁有基本實作能力，
不清楚如何執行 JavaScript 的話，可參閱 W3SChools，或利用 CodePen 進行練習 😁。

XMLHttpRequest (XHR) 是 JavaScript 著名的古老 API，
頁面能透過它操作 HTTP 請求，進行網路作業，
擷取資料的同時，卻不需進行頁面重載 (page reload)！

這大大地增加 Web 效能與體驗，這種非同步的 Web 應用架構，稱為 AJAX，
是過去許多 Web 應用的基石 (Ajax != XHR，僅是最常見的應用模式)。

「過去」，意味著現在不推薦使用 !
「過去」，意味著現在不推薦使用 !
「過去」，意味著現在不推薦使用 !

XMLHttpRequest (XHR) 已經十幾年了，
其結構設計，已無法應對現今複雜的 Web 環境，
且容易陷入回調函式地獄 (Callback Hell) 。

儘管如此，仍值得了解其用法，
對於理解其他 API、維護舊系統皆能有所幫助。

基本使用

以 XMLHttpRequest (XHR) 對 https://gank.io/api/random/data/福利/20，
送出 GET 請求，並將回應提供的影像 URI，添加至頁面為例:

一、實例物件

首先，以建構元實例一個 XMLHttpRequest 物件:

var xhr = new XMLHttpRequest();

二、設定請求

使用 open() 方法，設定請求，
請求方法除了 GET 與 POST，還能使用 PUT、DELETE、HEAD、OPTIONS !
並且預設使用了非同步 (async) 的方式接收回應:

/*
 * {string} 請求方法 (method)
 * {string} 目標 url
 * {boolean} 非同步 [async] -- 可選
 * {string} 使用者 [user] -- 可選
 * {string} 密碼 [password] -- 可選
 */
xhr.open("GET", "https://gank.io/api/random/data/福利/20");

非同步/異步是指執行任務 (e.g., 請求) 卡住了不會傻傻地等，
而是先繼續做其他事，等回應或失敗了，再來處理後續事宜。

無論是何種 HTTP Client，預設幾乎都是非同步，
才不會造成瀏覽器為等待 Server 回應，阻斷 (block) 執行，而造成卡死。

三、請求表頭

再來可以透過 setRequestHeader() 方法，設置請求訊息的表頭欄位，
基於安全考量，這些表頭欄位: Forbidden_header_name 是禁止添加的喔，
會由使用者代理 (e.g., 瀏覽器) 幫你搞定 !

四、監聽事件

使用非同步，需監聽 load 事件，
讓回應完成時能執行相對應的函式 — 回調函式 (callback):

// 非同步取得回應
xhr.onload = function () {
    .............
    ...處理回應...
    .............
};

五、發送請求

一切準備就緒後，就送出請求啦 !
send 方法中的參數，是請求訊息的酬載 (payload) 內容，
由於此次使用的是 GET 方法，不得送出酬載，因此設為空值:

xhr.send(null);

六、處理回應

剛剛的監聽事件，尚未說明如何處理回應。

回應的文字 text，能透過 responseText 屬性取得，
若 Server 回應的是 XML 或 XHTML，則使用 responseXML 屬性，
若回應的是常見的 JSON，則可以使用 JSON.parse() 方法，解析 responseText 屬性。

// 取得回應的 Content-Type 表頭欄位
// 以決定如何處理回應
var type = xhr.getResponseHeader("Content-Type");

// 建構元 (strategy, response)
var handler;

// 使用簡易的 正規表達式，判斷媒體類型
if (type.match(/^application\/json/)) {
    handler = new Handler(jsonHandler, JSON.parse(xhr.responseText));
} else if (type.match(/^application\/xml/)) {
    handler = new Handler(textHandler, xhr.responseXML);
} else {
    handler = new Handler(textHandler, xhr.responseText);
}
 
handler.handleResponse();

這裡為求簡潔省略回應狀態碼的判斷，
實務中必不能省！

可透過簡單的小於、等於，
判斷是 2xx 的成功、3xx 的重新導向或 4xx 客戶端錯誤… :

if (200 <= xhr.status && xhr.status <= 299)

也可以裝逼點，將回應狀態碼除以 100，
再用地板函數 (floor) 將小數點去掉 :

if (Math.floor(xhr.status / 100) == 2) {
    ...成功...
} else {
    ...其他...
}

七、輸出結果

最後，隨便寫一個 DOM 操作，
將回應的 URI，置於 <img> 的 src 屬性，即可享用勝利的果實:

// 簡易處理 JSON 回應
function jsonHandler(response) {
    let data = response.results;
    // 建立緩衝的文件片段 docFrag
    let docFrag = document.createDocumentFragment();
	
    for (var i = 0, l = data.length; i < l; i++) {
        var url = data[i].url;
        var img = document.createElement("img");
        img.src = url;
        img.width = 300;
        // 將 img 添加至 docFrag
        docFrag.appendChild(img);
    }
    // 將含有多個 img 的 docFrag
    // 一次新增至 HTML 的 body 中
    document.body.appendChild(docFrag);
}

1. 將 img 添加至 docFrag :

2. 將含有多個 img 的 docFrag
一次新增至 HTML 的 body 中 :

完成 ! (一切都是為了學習)，
可前往這裡觀看成果 :

二進制回應

上方處理回應，只說明使用 responseText 來處理回應文字，
於是，一個明顯的問題:

如果回應是二進制資料呢 ?

對此影像送出 GET 請求 (此處使用相對 URL) 為例:

xhr.open("GET", "its-you.jpg");

overrideMimeType — 不建議

早期 XMLHttpRequest (XHR) 解析二進制檔案是痛苦的事，
於是許多人利用 overrideMimeType 方法，複寫回應的 Content-Type 表頭欄位 (忽視回應的內容類型)，
將影像視為 Unicode 字串，並以轉換格式的方式處理:
(若看到 0xff 會頭暈的話，可參考進制簡介與完整的程式碼喔 😁)

// 複寫回應的 Content-Type
xhr.overrideMimeType('text/plain; charset=x-user-defined');

// 非同步取得回應
xhr.onload = function () {

    let response = xhr.responseText;
    let img = document.createElement("img");
    let data = "";
	
    for (var i = 0; i < response.length; i += 1) { 
        var u = response.charCodeAt(i) & 0xff;
        data += String.fromCharCode(u);
    }

    img.src = "data:image/jpeg;base64," + window.btoa(data);

    // 新增 img 元素至頁面
    document.body.appendChild(img);
};

最後透過這種 <img src="data:image/jpeg;base64,/9j/4AA......>，
將內容進行編碼的 Data URI 顯示:

Blob

上述方法雖然可行，但是並不通用，且帶來許多問題 (e.g., 效能、編碼)，
處理二進制，許多人應該會直覺聯想到 — Blob !

Blob (Binary Large Object) 是 JavaScript 的二進位資料，
做為許多 JavaScript API 的資料交換機制，
操作檔案的 File 物件，便是 Blob 的子型別 !

指定內容類型

要以 XHR 使用 blob，首先得在發送請求前，
將 XHR (Level 2) 的 responseType 屬性設置為「blob」:

xhr.responseType = 'blob';

處理回應

接下來就等著處理回應啦 !
需注意的是，一旦聲明 responseType 回應類型屬性，
即必須改用 response 屬性處理回應，而非 responseText 或 responseXML 屬性:

var blob = xhr.response;

建立 Blob URI

存取 Blob 內容，最簡單的方式就是使用 Blob URI (或稱 Object URI)，
就像 http URI 是 https://xxxxxxxx ，Blob URI 長成 blob://xxxxxxxxx。

其生命週期很間單，一旦關閉該頁面 blob URI 即失效 (內容可能暫存於記憶體或硬碟)，
最重要的是，所有正規 URI 的地方都能使用它 (這招超方便)，
於是我們把它設定給 img 和 a 標籤，不但能立馬顯示圖片，還能直接下載喔 !

// 建立 blob URI (Object URI)
var blobUri = window.URL.createObjectURL(blob);

img.src = blobUri;
link.href = blobUri;

Result:

更多 Blob 用法可參考 MDN Blob，以及黑暗執行緒 HTML5筆記–Object URL。

ArrayBuffer

說到二進制，怎麼能忘了 ArrayBuffer !!

ArrayBuffer — — 陣列緩衝區，
是一位元組 (bytes) 序列，能夠以不同的位元單位「檢視/視圖 (view)」。
[i.e., 8位元、16位元、32位元等型別陣列 (Typed Array)]

與 Blob 相同，將 responseType 屬性設置為「arraybuffer」，
便能以型別陣列來操作位元組塊 !

xhr.responseType = 'arraybuffer';

當然，你能透過 FileReader 或 Blob 建構元，在 ArrayBuffer 與 Blob 之間進行轉換:

var blob = new Blob( [ buffer ], { type: "image/jpeg" } );

更多內容可參考 MDN ArrayBuffer。

POST 請求

截至目前為止，都是示範 GET 請求 (因為最簡單)，
實際上，要送出 POST 請求 — — 也非常簡單 🤣，
僅需將請求方法換成 post，並於 send() 方法置放資料酬載 (如果有的話) 。

使用其他 HTTP 請求方法 (e.g., PUT、DELETE、HEAD、OPTIONS) 也如出一轍，
但必須注意，該方法是否允許發送酬載 (payload) 。 (保留)

Ex:

var payload = {name: "勝", city: "Taipei"};
var xhr = new XMLHttpRequest();
xhr.open("POST", "demo_test_post.asp");
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded; charset=UTF-8');
xhr.onload = function () {
    document.body.innerHTML = xhr.responseText;
};
var encodedData = encodeFormData(payload);

xhr.send(encodedData);

Content-Type (內容類型)

application/x-www-form-urlencoded

別忘記啦 ! HTML5 表單預設編碼方式為 application/x-www-form-urlencoded，
POST 表單在送出資料前，需設置 Content-Type 表頭，
否則 Server 可能不會鳥你 !

最重要的是 — 開發時，務必記得處理百分比編碼 (Percent-Encoding)，
你或許會想使用犀牛本作者 David 寫的簡易函式 — encodeFormData :

function encodeFormData(data) {
    if (!data) return "";    // Always return a string
    var pairs = [];          // To hold name=value pairs
    for (var name in data) {                                  // For each name
        if (!data.hasOwnProperty(name)) continue;            // Skip inherited
        if (typeof data[name] === "function") continue;      // Skip methods
        var value = data[name].toString();                   // Value as string
        name = encodeURIComponent(name.replace(" ", "+"));   // Encode name
        value = encodeURIComponent(value.replace(" ", "+")); // Encode value
        pairs.push(name + "=" + value);   // Remember name=value pair
    }
    return pairs.join('&'); // Return joined pairs separated with &
}

Input:

var data = {name: "勝", city: "Taipei"};

Output:

name=%E4%B8%AD%E5%8B%9D&city=Taipei

可結合上例於 w3schools 測試，
詳細作法可參考: ~~(5-3) GET vs. POST~~ 保留。

multipart/form-data

上傳檔案用的 multipart/form-data 就更簡單啦 !
使用 FormData API 與它的 append() 方法加入 File (或 Blob、buffer) 即可，
送出資料時，XHR 會幫你處理好 multipart/form-data 與麻煩的 boundary:

var xhr = new XMLHttpRequest();
xhr.open("POST", "test.php");
xhr.onload = function () {
    document.body.innerHTML = xhr.responseText;
};

// 實例 FormData 物件
var formData = new FormData();

// 新增 blob
formData.append("SNIS-928", blob);

// 送出 !
xhr.send(formData);

其他

POST、PUT 不僅僅用於表單，Content-Type 需依 Server 實作方式而定，
例如，常見的 application/json 或 application/octet-stream，使用上也是如出一轍:

xhr.setRequestHeader('Content-type', 'application/json ; charset=UTF-8');

並且能使用 Blob 或 ArrayBuffer，
做為 POST、PUT 請求的資料酬載 (payload) 送出喔 !

Ex:

var bytes = new Uint8Array(256);

// 初始化為 0、1、2、3...254、255
for (var i = 0, l = bytes.length; i < l; i++) {
    bytes[i] = i & 0xff;
}

xhr.send(bytes.buffer);

送出的請求訊息:

POST /test.php HTTP/1.1
Host: localhost:8080
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:53.0) Gecko/20100101 Firefox/53.0
Content-Length: 256
 
�	
 !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcdefghijklmnopqr
stuvwxyz{|}~ ¡¢£¤¥¦§¨©ª«¬®¯°±²³´µ¶·¸¹º»¼½¾¿ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖ×ØÙÚÛÜÝÞßàáâãäåæçèéêëìíîïðñòóôõö÷øùúûüýþÿ

咦，跟 Unicode 字元列表似乎有什麼巧合 🤔 ?

礙於篇幅，這邊就就不探討啦，
希望讓你對編碼有點概念 😀。

同源政策 (Same-origin policy)

若您嘗試將上述範例的 URI 替換為絕對形式 (absolute-form)，有很大的機會發生錯誤 !
例如，以本地環境對 https://example.com 送出請求:

...略...

xhr.open("POST", "https://example.com");

...略...

主控台會出現:

這是因為同源政策 (Same-origin policy) 的關係 !
同源政策是 User Agent (e.g., 瀏覽器) 對頁面安全的必要措施，
也是 JavaScript Request 與其他 HTTP Client 最不相同的地方，
沒有它的話，惡意 script 將能輕易竊取頁面資訊或注入攻擊 😨 !

因此，不建議以客戶端 JavaScript 來寫爬蟲 (crawler)，
儘管可行 (e.g., extension)，但相對其他方式麻煩，
你或許會想以 Node.js、python、Java、php 或 cmdline… 來實作。

來源 (Origin)

來源 (Origin) 是指資源下載處的協定 (protocol) + 主機 (host) + 通訊埠 (port)，
當兩資源具有相同的來源，即稱 — — 同源 (Same-origin)。

同源 (Same-origin) 需要三者一致，
即使主機名稱 (e.g., example.com) 相同，而通訊協定 (e.g., HTTP & HTTPS) 不同，
也屬於非同源/跨來源 (cross-origin) !

MDN 提供了良好的同源範例 :

資源 (Resource)

同源政策 (Same-origin policy) 是對跨來源資源的互動限制，
例如，JavaScript 可以開啟、關閉某個跨來源視窗，卻不一定能操作、獲取其內容。

資源，可以是任意東西 (e.g., HTML、css、JavaScript、影音媒體)，
且規則適用於視窗 (window)、分頁 (tab) 或頁框 (frame) 內。

例如，一個用 iframe 標籤，產生的頁框:

<iframe id="myFrame1" src="/" width="100%"></iframe>

此 iframe 與本頁面同源 (Same-origin) (NotFalse.net)，
因此執行以下 JavaScript ，將能印出頁面標題:
(僅為範例，未來可能更換主題 😅)

// 取得 myFrame1 的 Window 物件
var myFrame1 = document.getElementById("myFrame1").contentWindow;

// 先找出 class 為 site-title 的 標題 h1
// 再找出此 h1 的直系子元素 a
var titleLink = myFrame1.document.querySelector('h1.site-title > a');

// 取得文字內容
var title = titleLink.textContent;

console.log(title);

然而在跨來源的頁面 (e.g., example.com)，
將無法執行，就算此 iframe元素是由同份 JavaScript 插入的:

限制 (Constraint)

同源政策 (Same-origin policy) 主要的限制有三種:

跨來源嵌入(Cross-origin embedding)
跨來源讀取(Cross-origin read)
跨來源寫(Cross-origin writes)

這並不在本篇的討論範圍，
MDN 提供了同源政策 (Same-origin policy)，及其普遍解法: 跨來源 HTTP 請求 (CORS) 的詳細說明，
若您為網頁開發者，務必前往了解 (當然，還有其他解法: JSONP、iframe…) !

XHR & CORS

跨來源 HTTP 請求 (cross-origin HTTP request, CORS) 是最普遍的 — 方寬同源政策的方式，
全仰賴 Server 是否允許 CORS 並實作之，
Client 端的 XMLHttpRequest 已於 Level 2 規範中支援了 CORS，
因此跨來源請求的程式碼，完全不需更動 (Server 不支援就是不支援 😂) !

推薦閱讀:
1. 阮一峰的網路日誌 — 跨域資源共享 CORS 詳解，深入淺出的 CORS 的教學。
2. enable-cors，告訴你如何讓 Server 支援 CORS。

範例原始檔: Github，

下集: 發送 HTTP 請求 (II) jQuery Ajax。

在《XMLHttpRequest — JavaScript 發送 HTTP 請求 (I)》中有 8 則留言

匿名訪客表示:
2017-07-0912:38:03
好文
回覆
匿名訪客表示:
2017-10-1015:49:09
thank you very much for your explanation
回覆
1. 鄭中勝表示:
  2017-11-0914:28:16
  My pleasure 😁.
  回覆
匿名訪客表示:
2017-11-2411:46:56
是不是出現了番號R
XD
回覆
1. 鄭中勝表示:
  2017-11-2715:23:06
  你不要這麼專業好不好 😂
  回覆
匿名訪客表示:
2020-06-1522:32:40
請問您文中說XHR已經過時，那後續取代它的是什麼呢?
既然AJAX是XHR的應用，那請問AJAX是否也過時了?
回覆
自動引用通知: 百日轉職前端工程師：第十二週前後端整合復盤《DAY 18》 - 旅書人 TripBook
自動引用通知: JavsScript-XMLHttpRequest 發送 HTTP 請求 - Steven玄

NotFalse 技術客

XMLHttpRequest — JavaScript 發送 HTTP 請求 (I)

XMLHttpRequest

基本使用

一、實例物件

二、設定請求

三、請求表頭

四、監聽事件

五、發送請求

六、處理回應

七、輸出結果

二進制回應

overrideMimeType — 不建議

Blob

指定內容類型

處理回應

建立 Blob URI

ArrayBuffer

POST 請求

Content-Type (內容類型)

application/x-www-form-urlencoded

multipart/form-data

其他

同源政策 (Same-origin policy)

來源 (Origin)

資源 (Resource)

限制 (Constraint)

XHR & CORS

More

在《XMLHttpRequest — JavaScript 發送 HTTP 請求 (I)》中有 8 則留言

發表迴響取消回覆

XMLHttpRequest

基本使用

一、實例物件

二、設定請求

三、請求表頭

四、監聽事件

五、發送請求

六、處理回應

七、輸出結果

二進制回應

overrideMimeType — 不建議

Blob

指定內容類型

處理回應

建立 Blob URI

ArrayBuffer

POST 請求

Content-Type (內容類型)

application/x-www-form-urlencoded

multipart/form-data

其他

同源政策 (Same-origin policy)

來源 (Origin)

資源 (Resource)

限制 (Constraint)

XHR & CORS

分享此文：

More

在《XMLHttpRequest — JavaScript 發送 HTTP 請求 (I)》中有 8 則留言

發表迴響 取消回覆

發表迴響取消回覆