JavaScript網(wǎng)絡(luò)請(qǐng)求與遠(yuǎn)程資源的方法

今天小編給大家分享一下JavaScript網(wǎng)絡(luò)請(qǐng)求與遠(yuǎn)程資源的方法的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來(lái)了解一下吧。

一、Ajax的誕生

2005年，Jesse James Garrett撰寫(xiě)了一篇文章《Ajax - A New Approach to Web Applications》，這篇文章中描繪了一個(gè)被稱(chēng)為Ajax（Asynchronous JavaScript+XML，即異步JavaScript+XML）的技術(shù)。這個(gè)技術(shù)涉及發(fā)送服務(wù)器請(qǐng)求額外數(shù)據(jù)而不刷新頁(yè)面，從而實(shí)現(xiàn)更好地用戶(hù)體驗(yàn)。Garrett解釋了這個(gè)技術(shù)怎樣改變自Web誕生以來(lái)就一直延續(xù)的傳統(tǒng)單擊等待的模式。
把Ajax推到歷史舞臺(tái)上的關(guān)鍵技術(shù)是XMLHttpRequest（XHR）對(duì)象。在XHR出現(xiàn)之前，Ajax風(fēng)格的通信必須通過(guò)一些黑科技實(shí)現(xiàn)，主要是使用隱藏的窗格或內(nèi)嵌窗格。XHR為發(fā)送服務(wù)器請(qǐng)求和獲取相應(yīng)提供了合理的接口。這個(gè)接口可以實(shí)現(xiàn)異步從服務(wù)器獲取額外數(shù)據(jù)，意味著用戶(hù)不用頁(yè)面刷新也可以獲取數(shù)據(jù)。通過(guò)XHR對(duì)象獲取數(shù)據(jù)后，可以使用DOM方法把數(shù)據(jù)插入網(wǎng)頁(yè)。
XHR對(duì)象的API被普遍認(rèn)為比較難用，而Fetch API自動(dòng)誕生以后迅速成為了XHR更現(xiàn)代的替代標(biāo)準(zhǔn)，F(xiàn)etch API支持期約promise和服務(wù)線(xiàn)程（service worker），已經(jīng)成為及其強(qiáng)大的Web開(kāi)發(fā)工具。

二、跨源資源共享

通過(guò)XHR進(jìn)行Ajax通信的一個(gè)主要限制是跨源安全策略。默認(rèn)情況下，XHR只能訪(fǎng)問(wèn)與發(fā)起請(qǐng)求的頁(yè)面在同一域內(nèi)的資源。這個(gè)安全限制可以防止某些惡意行為。不過(guò)，瀏覽器也需要支持合法跨源訪(fǎng)問(wèn)的能力。
跨源資源共享（CORS，Cross-Origin Rerource Sharing）定義了瀏覽器與服務(wù)器如何實(shí)現(xiàn)跨源通信。CORS背后的基本思路就是使用自定義的HTTP頭部允許瀏覽器和服務(wù)器相互了解，以確定請(qǐng)求或相應(yīng)應(yīng)該成功還是失敗。
對(duì)于簡(jiǎn)單的請(qǐng)求，比如GET或POST請(qǐng)求，沒(méi)有自定義頭部，而且請(qǐng)求體是text/plain類(lèi)型，這樣的請(qǐng)求在發(fā)送時(shí)會(huì)有一個(gè)額外的頭部叫Origin。Origin頭部包含發(fā)送請(qǐng)求的頁(yè)面的源（協(xié)議、域名、端口），以便服務(wù)器確定是否為其提供響應(yīng)。
現(xiàn)代瀏覽器通過(guò)XMLHttpRequst對(duì)象原生支持CORS，在嘗試訪(fǎng)問(wèn)不同源的資源時(shí)，這個(gè)行為會(huì)被自動(dòng)觸發(fā)。要向不同域的源發(fā)送請(qǐng)求，可以使用標(biāo)準(zhǔn)XHR對(duì)象并給open()方法傳入一個(gè)絕對(duì)URL，比如：

let xhr = new XMLHttpRequest();xhr.onreadystatechange = function(){
	if(xhr.readyState == 4){
		if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
			alert(xhr.reaponseText);
		}else{
			alert("Request was unsuccessful:"+xhr.status);
		}
	}};xhr.open("get","http://www.nezha.con/page/",true);xhr.send(null);

跨域XHR對(duì)象允許訪(fǎng)問(wèn)status和statusText屬性，也允許同步請(qǐng)求，出于安全考慮，跨域XHR對(duì)象也施加了一些額外的限制。

• 不能使用setRequestHeader()設(shè)置自定義頭部；

• 不能發(fā)送和接收cookie；

• getAllResponseHeaders()方法始終返回空字符串；

因?yàn)闊o(wú)論同域還是跨域請(qǐng)求都是用同一個(gè)接口，所以最好在訪(fǎng)問(wèn)本地資源時(shí)使用相對(duì)URL，在訪(fǎng)問(wèn)遠(yuǎn)程資源時(shí)使用絕對(duì)URL，這樣可以更明確地區(qū)分使用場(chǎng)景，同時(shí)避免出現(xiàn)訪(fǎng)問(wèn)本地資源時(shí)出現(xiàn)頭部或cookie信息訪(fǎng)問(wèn)受限的問(wèn)題。

三、預(yù)檢請(qǐng)求

CORS通過(guò)一種叫預(yù)檢請(qǐng)求的服務(wù)器驗(yàn)證機(jī)制，允許使用自定義頭部、除GET和POST之外的方法，以及不同請(qǐng)求體內(nèi)容類(lèi)型。在要發(fā)送涉及上述某種高級(jí)選項(xiàng)的請(qǐng)求時(shí)，會(huì)先想服務(wù)器發(fā)送一個(gè)預(yù)檢請(qǐng)求。這個(gè)請(qǐng)求使用OPTIONS方法發(fā)送并包含如下頭部：

• Origin：與簡(jiǎn)單請(qǐng)求相同；

• Access-Control-Request-Method：請(qǐng)求希望使用的方法；

• Access-Control-Request-Headers：（可選）要使用的逗號(hào)分隔的自定義頭部列表；

四、Fetch API

Fetch API能夠執(zhí)行XMLHttpRequest對(duì)象的所有任務(wù)，但更容易使用，接口也更現(xiàn)代化，能夠在Web工作線(xiàn)程等Web工具中使用。XMLHttpRequest可以選擇異步，而Fetch API則必須是異步。
fetch()方法是暴露在全局作用域中的，包括主頁(yè)面執(zhí)行線(xiàn)程、模塊和工作線(xiàn)程。調(diào)用這個(gè)方法，瀏覽器就會(huì)向給定URL發(fā)送請(qǐng)求。
1、分派請(qǐng)求
fetch()只有一個(gè)必需的參數(shù)input。多數(shù)情況下，這個(gè)參數(shù)是獲取資源的URL，這個(gè)方法返回一個(gè)期約：

let r = fetch('/bar');console.log(r);//Promise<pending>

URL的格式（相對(duì)路徑、絕對(duì)路徑等）的解釋與XHR對(duì)象一樣。
請(qǐng)求完成、資源可用時(shí)，期約會(huì)解決一個(gè)Response對(duì)象，這個(gè)對(duì)象是API的封裝，可以通過(guò)它取得相應(yīng)資源。獲取資源要使用這個(gè)對(duì)象的屬性和方法，掌握響應(yīng)的情況并將負(fù)載均衡轉(zhuǎn)為有用的形式。
2、讀取響應(yīng)
讀取響應(yīng)內(nèi)容的最簡(jiǎn)單方式是取得純文本格式的內(nèi)容，只要用到text()方法。這個(gè)方法返回一個(gè)期約，會(huì)解決為取得資源的完整內(nèi)容。
3、處理狀態(tài)碼和請(qǐng)求失敗
Fetch API 支持通過(guò)Response的status和statusText屬性檢查響應(yīng)狀態(tài)。成功獲取響應(yīng)的請(qǐng)求通常會(huì)產(chǎn)生值為200的狀態(tài)碼。
4、常見(jiàn)Fetch請(qǐng)求模式

• 發(fā)送JSON數(shù)據(jù)

• 在請(qǐng)求體中發(fā)送參數(shù)

• 發(fā)送文件

• 加載Blob文件

• 發(fā)送跨域請(qǐng)求

• 中斷請(qǐng)求

五、websocket

套接字websocket的目標(biāo)是通過(guò)一個(gè)長(zhǎng)時(shí)連接實(shí)現(xiàn)與服務(wù)器全雙工、雙向的通信。在JavaScript中創(chuàng)建websocket時(shí)，一個(gè)HTTP請(qǐng)求會(huì)發(fā)送到服務(wù)器以初始化連接。服務(wù)器響應(yīng)后，連接使用HTTP中的Upgrade頭部從HTTP協(xié)議切換到websocket協(xié)議，這意味著websocket不能通過(guò)標(biāo)準(zhǔn)HTTP服務(wù)器實(shí)現(xiàn)，而必須使用支持該協(xié)議的專(zhuān)有服務(wù)器。
因?yàn)閣ebsocket使用了自定義協(xié)議，所以URL方案稍有變化，不能再使用http://或https://，而要使用ws://和wss://。前者是不安全的連接，后者是安全連接。在執(zhí)行websocket URL時(shí)，必須包含URL方案，因?yàn)閷?lái)有可能再支持其他方案。
使用自定義協(xié)議而非HTTP協(xié)議的好處是，客戶(hù)端與服務(wù)器質(zhì)檢可以發(fā)送非常少的數(shù)據(jù)，不會(huì)對(duì)HTTP造成任何負(fù)擔(dān)。使用更小的數(shù)據(jù)包讓websocket非常適合寬帶和延遲問(wèn)題比較明顯的移動(dòng)應(yīng)用。使用自定義協(xié)議的缺點(diǎn)是，定義協(xié)議的時(shí)間比定義JavaScript API的時(shí)間要長(zhǎng)，websocket得到了所有主流瀏覽器的支持。

以上就是“JavaScript網(wǎng)絡(luò)請(qǐng)求與遠(yuǎn)程資源的方法”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。