摘要:方法用于常規(guī)請求,它適用于當(dāng)完全指定請求資源,請求對服務(wù)器沒有任何副作用以及服務(wù)器響應(yīng)是可緩存的。不同的額外數(shù)據(jù)服務(wù)器可能返回不同的數(shù)據(jù)。四發(fā)送請求使用的最后一步是指定可選的請求主體并向服務(wù)器發(fā)送它。
瀏覽器在XMLHttpRequest類上定義了他們的HTTP API。 這個類的每一個實例都是一個獨(dú)立的請求/響應(yīng)對,這個對象的屬性和方法允許指定請求細(xì)節(jié)和提取響應(yīng)數(shù)據(jù)。
一、實例化XMLHttpResquest()使用這個HTTP API的第一步就是實例化一個XMLHttpRequest對象:
var requestObj new XMLHttpRequest();
當(dāng)然,實際開發(fā)中,不會這么簡單,我們還要考慮兼容早版本的IE的問題,在IE5和IE6中它只是一個ActiveX對象。IE7之前的版本不支持非標(biāo)準(zhǔn)化的XMLHttpRequest()構(gòu)造函數(shù)。我們需要這樣寫:
if (window.XMLHttpRequest) { requestObj = new XMLHttpRequest(); } else { requestObj = new ActiveXObject("Microsoft.XMLHTTP")//兼容早版本的ie, 如IE5 IE6 }
除了實例化一個XMLHttpRequest對象,我們也可以重用已有的對象,但要注意,這樣會終止之前通過該對象掛起的任何請求。
請求和響應(yīng)的組成一個http請求由4部分組成:
方法或“動作”
請求的 url
可選的請求頭集合,可能包含身份驗證信息
可選的請求主體
HTTP響應(yīng)包含3部分:
狀態(tài)碼,顯示請求的狀態(tài),如是否成功
響應(yīng)頭集合
響應(yīng)主體
二、指定請求發(fā)起HTTP請求的下一步是調(diào)用XMLHttpRequest對象的open()方法:
request.open("方法", "URL")
open()方法需要指定兩個必要部分:方法 和 url。第一個參數(shù)為“方法”,不區(qū)分大小寫,但通常使用大寫,常用的方法有 “GET” “POST”。GET 方法用于常規(guī)請求,它適用于當(dāng)URL完全指定請求資源,請求對服務(wù)器沒有任何副作用以及服務(wù)器響應(yīng)是可緩存的。POST方法常用于HTML表單,它在請求主體中包含額外數(shù)據(jù),且這些數(shù)據(jù)常需要存儲到服務(wù)器的數(shù)據(jù)庫上(副作用)。不同的額外數(shù)據(jù)服務(wù)器可能返回不同的數(shù)據(jù)。
除了POST和GET方法,還有“DELETE” “HEAD” “OPTION” “PUT”等方法。他們都可以作為open()方法的第一個參數(shù)。
open()方法還有第三個參數(shù),用來指定方法是同步還是異步的。而默認(rèn)是異步的,這個在文章后面會細(xì)講。
三、設(shè)置請求頭如果有請求頭的話,我們可以通過
requestObj.setRequestHeader("Content-Type", " ")
來設(shè)置請求頭。
要注意的是:對相同的頭調(diào)用setRequestHeader()多次,新值不會取代舊值,相反,HTTP請求將包含這個頭的多個副本或這個頭將指定多個值。并不是所有的頭都可以設(shè)置,如“Content-length”"Date" "Referer" 和 "User-Agent"等,XMLHttpRequest將自動添加這些頭而防止偽造它們。
使用XMLHttpRequest的最后一步是指定可選的請求主體并向服務(wù)器發(fā)送它。使用send()方法:
requestObj.send(null)
GET方法沒有主體,我們在send()方法中傳入null或省略這個參數(shù)。POST請求通常擁有主體,同時應(yīng)該配合setRequestHeader()指定的“Content-Type”頭。
到現(xiàn)在,我們可以看到一個完整的發(fā)送請求的過程:
var requestObj; if (window.XMLHttpRequest) { requestObj = new XMLHttpRequest(); } else { requestObj = new ActiveXObject("Microsoft.XMLHTTP") } requestObj.open("方法", url, async); requestObj.setRequestHeader("Content-Type", "xxxxxxxx") //根據(jù)方法設(shè)置相應(yīng)的頭 requestObj.send();
前面部分講了如何 發(fā)送ajax請求_,下面部分是如何 _取得響應(yīng)
五、取得響應(yīng)一個完整的HTTP響應(yīng)由狀態(tài)碼、響應(yīng)頭集合和響應(yīng)主體組成。這些都可以通過XMLHttpRequest對象的屬性和方法使用。
status和statusText屬性以數(shù)字和文本的形式返回HTTP狀態(tài)碼。
getResponseHeader()和getAllResponseHeaders()能查詢響應(yīng)頭。
響應(yīng)主體可以從 reponseText 屬性中得到文本形式,從responseXML中得到Document形式。
在send()方法發(fā)送后,我們需要知道我們的請求什么時候得到了響應(yīng),請求是否成功等,這時候我們就要用到XMLHttpResquest對象上的 readyState 屬性,readyState屬性是一個整數(shù),它指定了請求的狀態(tài):
常量 | 值 | 含義 |
---|---|---|
UNSENT | 0 | open()尚未使用 |
OPENED | 1 | open()已調(diào)用 |
HEADERS_RECEIVED | 2 | 接收到頭部信息 |
LOADING | 3 | 接收到響應(yīng)主體 |
DONE | 4 | 響應(yīng)完成 |
通過readyState我們就可以知道當(dāng)前的請求出于什么狀態(tài)了,那我們怎么去監(jiān)聽readyState呢?其實在每次readyState改變的時候,都會觸發(fā)readystatechange事件,而我們可以通過onreadystatechange屬性去監(jiān)聽readystatechange事件。所以通過onreadystatechange屬性就可以間接的監(jiān)聽到readyState的改變了。當(dāng)然我們也可以使用addEventListener()方法來監(jiān)聽,但我們通常不這么做。
所以我們可以通過下面代碼來獲取響應(yīng)信息:
requestObj.onreadystatechange = function() { // 監(jiān)聽readyState的變化 if (requestObj.readyState == 4) { // 判斷響應(yīng)是否完成 if (requestObj.status == 200) { // 判斷請求是否成功 console.log(resquestObj.responseText); } } }
所以到這里,我們應(yīng)該知道了一個完整的原生ajax請求是怎么樣的了。
// 實例化XMLHttpRequest var requestObj; if (window.XMLHttpResquest) { requestObj = new XMLHttpRequest(); } else { requestObj = new ActiveXObject("Microsoft.XMLHTTP") } // 發(fā)送請求 requestObj.open("TYPE", "URL"); requestObj.setRequestHeader("Content-Type", .....); requestObj.send(); // 獲取響應(yīng) requestObj.onreadystatechange = function() { if (requestObj.readyState == 4) { if (requestObj.status == 200) { console.log(requestObj.reponseText); } } }六、同步請求
是否還記得前面說到,open()方法還有第三個參數(shù),它指定請求是同步的還是異步的,而默認(rèn)值為true, 使得請求為異步請求。我們可以給它傳入false來實現(xiàn)同步請求。
requestObj.open(type, url, false);
這樣我們就不需要去監(jiān)聽readyState的值來獲知請求何時得到了響應(yīng)了。
requestObj.open("TYPE", "URL", false); requestObj.setRequestHeader("Content-Type", .....); requestObj.send(); // 當(dāng)請求得到響應(yīng)才執(zhí)行 if (requestObj.status != 200) throw new Error(request.statusText); console.log(requestObj.reponseText);
同步請求是吸引人的,但是同步請求意味著什么呢?意味著由于JavaScript是單線程的,當(dāng)send()方法調(diào)用后,請求發(fā)出,send()方法將阻塞這份代碼,send()方法后面的代碼都不會被執(zhí)行,直到請求得到響應(yīng),如果連接的服務(wù)器響應(yīng)慢,用戶的瀏覽器UI就會被凍結(jié)。所以不是特殊情況,最好不用同步請求。
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/92486.html
摘要:一概述什么是同步,什么是異步同步現(xiàn)象客戶端發(fā)送請求到服務(wù)器端,當(dāng)服務(wù)器返回響應(yīng)之前,客戶端都處于等待卡死狀態(tài)異步現(xiàn)象客戶端發(fā)送請求到服務(wù)器端,無論服務(wù)器是否返回響應(yīng),客戶端都可以隨意做其他事情,不會被卡死的運(yùn)行原理頁面發(fā)起請求,會將請求發(fā)送 一、Ajax概述1.什么是同步,什么是異步同步現(xiàn)象:客戶端發(fā)送請求到服務(wù)器端,當(dāng)服務(wù)器返回響應(yīng)之前,客戶端都處于等待 卡死狀態(tài)異步現(xiàn)象:客戶...
摘要:原生與對的實現(xiàn)一定義里這么解釋異步的和。二原生實現(xiàn)所有現(xiàn)代瀏覽器以及均內(nèi)建對象。一般是正常未找到頁面,一般是錯誤,或者后臺沒有創(chuàng)建相應(yīng)的內(nèi)部服務(wù)錯誤,多為后臺錯誤。基本上通過發(fā)送的數(shù)據(jù)及傳回的數(shù)據(jù)就能定位問題所在了。 原生JS與jQuery對AJAX的實現(xiàn) 一、定義 W3C里這么解釋AJAX: AJAX = Asynchronous JavaScript and XML(異步的 Jav...
摘要:簡要理解你才返回對象,你全家都返回對象你指的是響應(yīng)內(nèi)容的第四部分是一門語言,是另一門語言,這門語言抄襲了這門語言就是用請求和響應(yīng)響應(yīng)的第四部分是字符串,可以用語法表示一個對象,也可以用語法表示一個數(shù)組,還可以用語法,還可以用語法,還可以用語 簡要理解 AJAX 你才返回對象,你全家都返回對象(你指的是響應(yīng)內(nèi)容的第四部分) JS 是一門語言,JSON 是另一門語言,JSON 這門語言抄...
摘要:簡要理解你才返回對象,你全家都返回對象你指的是響應(yīng)內(nèi)容的第四部分是一門語言,是另一門語言,這門語言抄襲了這門語言就是用請求和響應(yīng)響應(yīng)的第四部分是字符串,可以用語法表示一個對象,也可以用語法表示一個數(shù)組,還可以用語法,還可以用語法,還可以用語 簡要理解 AJAX 你才返回對象,你全家都返回對象(你指的是響應(yīng)內(nèi)容的第四部分) JS 是一門語言,JSON 是另一門語言,JSON 這門語言抄...
摘要:我的博客原文直奔主題,和百度的搜索框都會有這種自動提示關(guān)聯(lián)詞條的功能,自己最近接觸的項目也有多個地方要做這個功能,后臺開發(fā)咱不懂,所以從前端方面來說說這個功能的主要兩點性能優(yōu)化。 我的博客原文:http://arayzou.com/2013/12/18/%E6%90%9C%E7%B4%A2%E8%87%AA%E5%8A%A8%E6%8F%90%E7%A4%BA%E5%8A%9F%E8%...
閱讀 3563·2021-08-31 09:39
閱讀 1869·2019-08-30 13:14
閱讀 2932·2019-08-30 13:02
閱讀 2779·2019-08-29 13:22
閱讀 2357·2019-08-26 13:54
閱讀 779·2019-08-26 13:45
閱讀 1597·2019-08-26 11:00
閱讀 990·2019-08-26 10:58