摘要:設(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請求常用于向服務(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ā)送請求之前注冊不管同步或者異步為了讓這個事件可以更加可靠一定觸發(fā),一定是先注冊了解同步模式即可,切記不要使用同步模式。至此,我們已經(jīng)大致了解了的基本。一種數(shù)據(jù)描述手段,基本現(xiàn)在的項目不用了,淘汰的原因數(shù)據(jù)冗余太多。 什么是ajax? AJAX 就是瀏覽器提供的一套 API,可以通過 JavaScript 調(diào)用,從而實現(xiàn)通過代碼控制請求與響應。實現(xiàn)網(wǎng)絡(luò)編程 1、使用 AJAX 的...
摘要:一定在發(fā)送請求之前注冊不管同步或者異步為了讓這個事件可以更加可靠一定觸發(fā),一定是先注冊了解同步模式即可,切記不要使用同步模式。至此,我們已經(jīng)大致了解了的基本。一種數(shù)據(jù)描述手段,基本現(xiàn)在的項目不用了,淘汰的原因數(shù)據(jù)冗余太多。 什么是ajax? AJAX 就是瀏覽器提供的一套 API,可以通過 JavaScript 調(diào)用,從而實現(xiàn)通過代碼控制請求與響應。實現(xiàn)網(wǎng)絡(luò)編程 1、使用 AJAX 的...
摘要:一定在發(fā)送請求之前注冊不管同步或者異步為了讓這個事件可以更加可靠一定觸發(fā),一定是先注冊了解同步模式即可,切記不要使用同步模式。至此,我們已經(jīng)大致了解了的基本。一種數(shù)據(jù)描述手段,基本現(xiàn)在的項目不用了,淘汰的原因數(shù)據(jù)冗余太多。 什么是ajax? AJAX 就是瀏覽器提供的一套 API,可以通過 JavaScript 調(diào)用,從而實現(xiàn)通過代碼控制請求與響應。實現(xiàn)網(wǎng)絡(luò)編程 1、使用 AJAX 的...
摘要:這意味著可以在不重新加載整個網(wǎng)頁的情況下,對網(wǎng)頁的某部分進行更新創(chuàng)建對象實例的傳輸方式傳輸數(shù)據(jù)方式有兩種,一種,一種。 Ajax 介紹 在node.js中前后臺交互數(shù)據(jù)經(jīng)常會用到這個東西,Ajax不是新的編程語言,而是一種使用現(xiàn)有標準的新方法,他可以實現(xiàn)不刷新網(wǎng)頁部分更新數(shù)據(jù)。 Ajax數(shù)據(jù)格式 ajax封裝 使用封裝Ajax需要了解什么是XMLHttpRequest; 什么是XML...
摘要:能異步地發(fā)送任意數(shù)據(jù)的技術(shù)稱為,表示異步的和。若你使用,使用發(fā)送表單還會影響同源策略,并導致內(nèi)容被發(fā)送到一個無法訪問的中。但要手動發(fā)送二進制數(shù)據(jù)的話,還有很多額外工作要做。用來發(fā)送二進制是很直接的,使用方法就好了。 系列文章說明 原文 在[發(fā)送表單數(shù)據(jù)]()一文中,HTML表單可以聲明式地發(fā)送一個HTTP請求。但表單也可以用JavaScript來準備一個HTTP請求。本文將探索如何...
閱讀 641·2023-04-25 18:37
閱讀 2799·2021-10-12 10:12
閱讀 8387·2021-09-22 15:07
閱讀 578·2019-08-30 15:55
閱讀 3187·2019-08-30 15:44
閱讀 2207·2019-08-30 15:44
閱讀 1637·2019-08-30 13:03
閱讀 1572·2019-08-30 12:55