了解XMLHttpRequest

hqman 發布于2019-08-21 16:59 / 1600人閱讀

摘要：設置該值能夠改變響應類型。響應的狀態狀態說明。可通過檢測變化狀態發生變化時，函數被回調成功完成判斷響應結果成功，通過拿到響應的文本失敗，根據響應碼判斷失敗原因請求還在繼續當前請求的活動階段。調用方法，但尚未收到響應。收到部分響應數據。

前言

最近與后端聯調，后端問能不能發送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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/88993.html

從0到1學AJAX，這篇就夠了！（進階三）

摘要：一定在發送請求之前注冊不管同步或者異步為了讓這個事件可以更加可靠一定觸發，一定是先注冊了解同步模式即可，切記不要使用同步模式。至此，我們已經大致了解了的基本。一種數據描述手段，基本現在的項目不用了，淘汰的原因數據冗余太多。什么是ajax？ AJAX 就是瀏覽器提供的一套 API，可以通過 JavaScript 調用，從而實現通過代碼控制請求與響應。實現網絡編程 1、使用 AJAX 的...

CoderDock 2019-08-23 15:32 評論0 收藏0
從0到1學AJAX，這篇就夠了！（進階三）

摘要：一定在發送請求之前注冊不管同步或者異步為了讓這個事件可以更加可靠一定觸發，一定是先注冊了解同步模式即可，切記不要使用同步模式。至此，我們已經大致了解了的基本。一種數據描述手段，基本現在的項目不用了，淘汰的原因數據冗余太多。什么是ajax？ AJAX 就是瀏覽器提供的一套 API，可以通過 JavaScript 調用，從而實現通過代碼控制請求與響應。實現網絡編程 1、使用 AJAX 的...

microelec 2019-07-01 11:24 評論0 收藏0
從0到1學AJAX，這篇就夠了！（進階三）

摘要：一定在發送請求之前注冊不管同步或者異步為了讓這個事件可以更加可靠一定觸發，一定是先注冊了解同步模式即可，切記不要使用同步模式。至此，我們已經大致了解了的基本。一種數據描述手段，基本現在的項目不用了，淘汰的原因數據冗余太多。什么是ajax？ AJAX 就是瀏覽器提供的一套 API，可以通過 JavaScript 調用，從而實現通過代碼控制請求與響應。實現網絡編程 1、使用 AJAX 的...

dingda 2019-08-02 14:23 評論0 收藏0
初學NodeJS（一）

摘要：這意味著可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新創建對象實例的傳輸方式傳輸數據方式有兩種，一種，一種。 Ajax 介紹在node.js中前后臺交互數據經常會用到這個東西，Ajax不是新的編程語言，而是一種使用現有標準的新方法，他可以實現不刷新網頁部分更新數據。 Ajax數據格式 ajax封裝使用封裝Ajax需要了解什么是XMLHttpRequest；什么是XML...

曹金海 2019-08-23 18:03 評論0 收藏0
【譯】通過JavaScript發送表單

摘要：能異步地發送任意數據的技術稱為，表示異步的和。若你使用，使用發送表單還會影響同源策略，并導致內容被發送到一個無法訪問的中。但要手動發送二進制數據的話，還有很多額外工作要做。用來發送二進制是很直接的，使用方法就好了。系列文章說明原文在[發送表單數據]()一文中，HTML表單可以聲明式地發送一個HTTP請求。但表單也可以用JavaScript來準備一個HTTP請求。本文將探索如何...

chinafgj 2019-08-20 17:52 評論0 收藏0