了解XMLHttpRequest

hqman 發(fā)布于2019-08-21 16:59 / 1606人閱讀

摘要：設(shè)置該值能夠改變響應類型。響應的狀態(tài)狀態(tài)說明?？赏ㄟ^檢測變化狀態(tài)發(fā)生變化時，函數(shù)被回調(diào)成功完成判斷響應結(jié)果成功，通過拿到響應的文本失敗，根據(jù)響應碼判斷失敗原因請求還在繼續(xù)當前請求的活動階段。調(diào)用方法，但尚未收到響應。收到部分響應數(shù)據(jù)。

前言

最近與后端聯(lián)調(diào)，后端問能不能發(fā)送get請求時，把請求參數(shù)放入請求體中，HTTP GET 請求在請求體中帶參數(shù)的問題

ajax介紹

AJAX不是JavaScript的規(guī)范，它只是一個哥們“發(fā)明”的縮寫：Asynchronous JavaScript and XML，意思就是用JavaScript執(zhí)行異步網(wǎng)絡(luò)請求。

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 () { // 狀態(tài)發(fā)生變化時，函數(shù)被回調(diào)
    if (request.readyState === 4) { // 成功完成
        // 判斷響應結(jié)果:
        if (request.status === 200) {
            // 成功，通過responseText拿到響應的文本:
            return success(request.responseText);
        } else {
            // 失敗，根據(jù)響應碼判斷失敗原因:
            return fail(request.status);
        }
    } else {
        // HTTP請求還在繼續(xù)...
    }
}

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

alert("請求已發(fā)送，請等待響應...");

XMLHttpRequest對象 Attributes

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

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

XHR用法

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

  xhr.open("get", "/advTest", false); // 并不會真正發(fā)送請求，而只是啟動一個請求以備發(fā)送

跨域相關(guān)

要發(fā)送特定請求需要調(diào)用send()方法：

  xhr.open("get", "/advTest", false); // 并不會真正發(fā)送請求，而只是啟動一個請求以備發(fā)送
  xhr.send(null);

xhr.send(null) send()方法必須接收一個參數(shù)，即要作為請求主體發(fā)送的數(shù)據(jù)，如果不需要發(fā)送則必須發(fā)送null,因為這個參數(shù)對瀏覽來說是必須的。調(diào)用send()之后請求被發(fā)送至服務(wù)器。

同步

當?shù)谌齻€為false時發(fā)送同步請求，JavaScript代碼會等到服務(wù)器響應之后在繼續(xù)執(zhí)行。
當收到響應后，響應的數(shù)據(jù)會自動填充XHR對象的屬性，相關(guān)屬性如下

responseText: 作為響應主體被返回的文本

responseXML: 如果響應的內(nèi)容是 "text/xml" 或 "application/xml",則這個屬性中將保存包含著響應數(shù)據(jù)的XML DOM 文檔。

status: 響應的HTTP狀態(tài)

statusText: HTTP狀態(tài)說明。

異步

同布發(fā)送請求當然沒有問題，但多數(shù)情況下，我們還是要發(fā)送異步請求，才能讓js繼續(xù)執(zhí)行而不必等待響應?？赏ㄟ^檢測readyState變化

request.onreadystatechange = function () { // 狀態(tài)發(fā)生變化時，函數(shù)被回調(diào)
    if (request.readyState === 4) { // 成功完成
        // 判斷響應結(jié)果:
        if (request.status === 200) {
            // 成功，通過responseText拿到響應的文本:
            return success(request.responseText);
        } else {
            // 失敗，根據(jù)響應碼判斷失敗原因:
            return fail(request.status);
        }
    } else {
        // HTTP請求還在繼續(xù)...
    }
}

readyState當前請求的活動階段。

0: 請求未開始。未調(diào)用open();

1: 啟動。調(diào)用open()方法，但未調(diào)用send()方法。

2：發(fā)送。調(diào)用send()方法，但尚未收到響應。

3：接收。收到部分響應數(shù)據(jù)。

4：完成。收到全部響應數(shù)據(jù)，可在客戶端使用。

xhr.abort(); -> xhr停止觸發(fā)XHR對象

HTTP頭部信息

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

Accept: 瀏覽器能處理的內(nèi)容類型

Cookie: 單前頁面設(shè)置的任何Cookie

Host: 發(fā)出請求的頁面所在的域

Referer：請求頁面發(fā)出的URL

User-Agent：瀏覽器用戶代理字符串
等等。。。

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

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

getResponseHeader("XX") 獲取請求頭中特定字段
getAllResponseHeader("XX") 獲取請求頭中所有字段

GET請求

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

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

POST請求

POST常用于向服務(wù)器發(fā)送需要保存的請求。 POST請求應該將數(shù)據(jù)作為請求體的主體提交，而GET傳統(tǒng)上不是這樣

GET POST區(qū)別

// 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級

規(guī)范化的XMLHttpRequest

FromData

序列化表單以及創(chuàng)建與表單格式相同的數(shù)據(jù)

  var data = new FromData();
  data.append("name", "云天明");

超時設(shè)定

XHR對象 timeout屬性，表示請求在等待響應多久之后停止

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

overrideMimeType() 方法

overrideMimeType() 用于重寫MIME類型。

總結(jié)

由于這個疑問，借此重新學習了下ajax。url在請求頭的Referer中故get請求在請求體中。

參考

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/88993.html

發(fā)表評論

登陸后可評論

0條評論

hqman

男|高級講師

我要關(guān)注我要私信

TA的文章

tensorflow

閱讀 641·2023-04-25 18:37
SCADA系統(tǒng)資料整理-概論

閱讀 2799·2021-10-12 10:12
主機號和主機數(shù)是什么-主機號怎么填寫？

閱讀 8387·2021-09-22 15:07
三種方法實現(xiàn)CSS三欄布局

閱讀 578·2019-08-30 15:55
前端面試每日3+1——第119天

閱讀 3187·2019-08-30 15:44
瀏覽器工作原理整理

閱讀 2207·2019-08-30 15:44
CSS 居中完全指南

閱讀 1637·2019-08-30 13:03
CSS：元素高度與寬度的討論系列文章(四)

閱讀 1572·2019-08-30 12:55

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

了解XMLHttpRequest

相關(guān)文章

從0到1學AJAX，這篇就夠了?。ㄟM階三）

從0到1學AJAX，這篇就夠了?。ㄟM階三）

從0到1學AJAX，這篇就夠了?。ㄟM階三）

初學NodeJS（一）

【譯】通過JavaScript發(fā)送表單

發(fā)表評論

0條評論

hqman

男|高級講師

TA的文章

tensorflow

SCADA系統(tǒng)資料整理-概論

主機號和主機數(shù)是什么-主機號怎么填寫？

三種方法實現(xiàn)CSS三欄布局

前端面試每日3+1——第119天

瀏覽器工作原理整理

CSS 居中完全指南

CSS：元素高度與寬度的討論系列文章(四)

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

了解XMLHttpRequest

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！