瞭解XMLHttpRequest

前言

最近與後端聯調，後端問能不能發送get請求時，把請求參數放入請求體中，HTTP GET 請求在請求體中帶參數的問題

ajax介紹

AJAX不是JavaScript的規範，它只是一個哥們「發明」的縮寫：Asynchronous JavaScript and XML，意思就是用JavaScript執行異步網絡請求。

function success(text) {
    var textarea = document.getElementById('test-response-text');
    textarea.value = text;
}

function fail(code) {
    var textarea = document.getElementById('test-response-text');
    textarea.value = 'Error code: ' + code;
}

var request = new XMLHttpRequest(); // 新建XMLHttpRequest對象

request.onreadystatechange = function () { // 狀態發生變化時，函數被回調
    if (request.readyState === 4) { // 成功完成
        // 判斷響應結果:
        if (request.status === 200) {
            // 成功，經過responseText拿到響應的文本:
            return success(request.responseText);
        } else {
            // 失敗，根據響應碼判斷失敗緣由:
            return fail(request.status);
        }
    } else {
        // HTTP請求還在繼續...
    }
}

// 發送請求:
request.open('GET', '/api/categories');
request.send();

alert('請求已發送，請等待響應...');

XMLHttpRequest對象

Attributes

參數	類型	描述
onreadystatechange	Function	一個JavaScript函數對象，當readyState屬性改變時會調用它。回調函數會在user interface線程中調用
readyState	unsigned short	5種狀態
response	varies	響應實體的類型由 responseType 來指定， 能夠是 ArrayBuffer， Blob， Document， JavaScript 對象 (即 "json")， 或者是字符串。若是請求未完成或失敗，則該值爲 null。
responseType	DOMString	設置該值可以改變響應類型。就是告訴服務器你指望的響應格式。1."" (空字符串) 2."arraybuffer"（ArrayBuffer） 3."blob"（Blob）4."document"（Document）5."json"（JavaScript 對象，解析自服務器傳遞回來的JSON 字符串。） 6."text" （字符串）
responseXML	responseXML Document?	本次請求的響應是一個 Document 對象，若是是如下狀況則值爲 null：請求未成功，請求未發送，或響應沒法被解析成 XML 或 HTML。當響應爲text/xml 流時會被解析。當 responseType 設置爲"document"，而且請求爲異步的，則響應會被當作 text/html 流來解析。只讀. 注意: 若是服務器不支持 text/xml Content-Type 頭，你可使用 overrideMimeType() 強制 XMLHttpRequest 將響應解析爲 XML。
status	unsigned short	該請求的響應狀態碼 (例如, 狀態碼200 表示一個成功的請求).只讀.
statusText	DOMString	能夠在 upload 上添加一個事件監聽來跟蹤上傳過程。
withCredentials	boolean	代表在進行跨站(cross-site)的訪問控制(Access-Control)請求時，是否使用認證信息(例如cookie或受權的header)。 默認爲 false。注意: 這不會影響同站(same-site)請求.

// 現代瀏覽器
  var request = new XMLHttpRequest(); // 新建XMLHttpRequest對象

XHR用法

使用XHR對象時， 要調用的第一個方法是open(), 接受3個參數（"get", "post" ....），請求的地址url， 表示是否異步發送請求的布爾值。

xhr.open('get', '/advTest', false); // 並不會真正發送請求，而只是啓動一個請求以備發送

跨域相關

要發送特定請求 須要調用send()方法：

xhr.open('get', '/advTest', false); // 並不會真正發送請求，而只是啓動一個請求以備發送
  xhr.send(null);

xhr.send(null) send()方法必須接收一個參數，即要做爲請求主體發送的數據，若是不須要發送則必須發送null,由於這個參數對瀏覽來講是必須的。調用send()以後請求被髮送至服務器。

同步

當第三個爲false時發送同步請求，JavaScript代碼會等到服務器響應以後在繼續執行。
當收到響應後，響應的數據會自動填充XHR對象的屬性，相關屬性以下

• responseText: 做爲響應主體被返回的文本
• responseXML: 若是響應的內容是 "text/xml" 或 "application/xml",則這個屬性中將保存包含着響應數據的XML DOM 文檔。
• status: 響應的HTTP狀態
• statusText: HTTP狀態說明。

異步

同布發送請求固然沒有問題，但多數狀況下， 咱們仍是要發送異步請求，才能讓js繼續執行而沒必要等待響應。可經過檢測readyState變化

request.onreadystatechange = function () { // 狀態發生變化時，函數被回調
    if (request.readyState === 4) { // 成功完成
        // 判斷響應結果:
        if (request.status === 200) {
            // 成功，經過responseText拿到響應的文本:
            return success(request.responseText);
        } else {
            // 失敗，根據響應碼判斷失敗緣由:
            return fail(request.status);
        }
    } else {
        // HTTP請求還在繼續...
    }
}

readyState當前請求的活動階段。

• 0: 請求未開始。 未調用open();
• 1: 啓動。 調用open()方法，但未調用send()方法。
• 2：發送。 調用send()方法，但還沒有收到響應。
• 3：接收。 收到部分響應數據。
• 4：完成。 收到所有響應數據，可在客戶端使用。

xhr.abort(); -> xhr中止觸發XHR對象

HTTP頭部信息

每一個http請求和響應都會帶有相應的頭部。

• Accept: 瀏覽器能處理的內容類型
• Cookie: 單前頁面設置的任何Cookie
• Host: 發出請求的頁面所在的域
• Referer： 請求頁面發出的URL
• User-Agent：瀏覽器用戶代理字符串
  等等。。。

自定義請求頭 需在open()之後，send()以前發送。

xhr.open('GET', '/api/categories');
// 自定義請求頭部信息
xhr.setRequextHeader('myHeader', 'myValue');
xhr.send();

getResponseHeader('XX') 獲取請求頭中特定字段
getAllResponseHeader('XX') 獲取請求頭中全部字段

GET請求

GET請求經常使用於向服務器查詢信息。添加請求參數於url以後。 對於傳入open()方法的URL末尾的查詢字符的名稱和值必須使用encodeURLComponent() 進行編碼。

xhr.open('get', 'test.php?name=程心&age=24&other=AA', true); // 準備異步請求
// 添加參數工具方法
fucntion addURLParams(url, name, value) {
  url += (url.index('?') == -1 ? '?' : '&');
  url += encodeURLComponent(name) + '=' + encodeURLComponent(value);
  return url; 
}

POST請求

POST經常使用於向服務器發送須要保存的請求。 POST請求應該將數據做爲請求體的主體提交，而GET傳統上不是這樣

GET POST區別

// post
xhr.open('GET', '/api/categories');
// 自定義請求頭部信息
xhr.setRequextHeader('Content-Type', 'application/x-www-form-urlencoded');
var from = document.getElementById('user-info');
xhr.send(serialize(from));
xhr.send();

POST 消耗的資源更多， GET最快達到POST的2倍。get url長度有限制

XMLHttpRequest 2級

規範化的XMLHttpRequest

FromData

序列化表單以及建立與表單格式相同的數據

var data = new FromData();
  data.append('name', '雲天明');

超時設定

XHR對象 timeout屬性，表示請求在等待響應多久以後中止

xhr.timeout = 1000;
xhr.ontimeout = function() {
    console.log('超時了。。')
}

overrideMimeType() 方法

overrideMimeType() 用於重寫MIME類型。

總結

因爲這個疑問，藉此從新學習了下ajax。url在請求頭的Referer中故get請求在請求體中。

參考

HTTP請求行、請求頭、請求體詳解
XMLHttpRequest