當(dāng)前位置：首頁 > 前端技术 > javascript >内容正文

javascript

【30天精通JavaScript ~ 网络篇】JavaScript 网络请求与远程资源

發(fā)布時(shí)間：2023/12/10 javascript 24 豆豆

生活随笔收集整理的這篇文章主要介紹了【30天精通JavaScript ~ 网络篇】JavaScript 网络请求与远程资源小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

- 一、Ajax的誕生
- 二、跨源資源共享
- 三、預(yù)檢請(qǐng)求
- 四、Fetch API
- 五、websocket
- 六、JavaScript思維導(dǎo)圖
- - ```為什么80%的碼農(nóng)做不了架構(gòu)師？>>>```
  - [Java專欄目錄 | 點(diǎn)擊這里](https://blog.csdn.net/guorui_java/article/details/120098618)
- 七、關(guān)注公眾號(hào)哪吒編程，回復(fù)1024，獲取思維導(dǎo)圖，還有不定期的送書活動(dòng)

一、Ajax的誕生

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

二、跨源資源共享

通過XHR進(jìn)行Ajax通信的一個(gè)主要限制是跨源安全策略。默認(rèn)情況下，XHR只能訪問與發(fā)起請(qǐng)求的頁面在同一域內(nèi)的資源。這個(gè)安全限制可以防止某些惡意行為。不過，瀏覽器也需要支持合法跨源訪問的能力。
跨源資源共享（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)求，沒有自定義頭部，而且請(qǐng)求體是text/plain類型，這樣的請(qǐng)求在發(fā)送時(shí)會(huì)有一個(gè)額外的頭部叫Origin。Origin頭部包含發(fā)送請(qǐng)求的頁面的源（協(xié)議、域名、端口），以便服務(wù)器確定是否為其提供響應(yīng)。
現(xiàn)代瀏覽器通過XMLHttpRequst對(duì)象原生支持CORS，在嘗試訪問不同源的資源時(shí)，這個(gè)行為會(huì)被自動(dòng)觸發(fā)。要向不同域的源發(fā)送請(qǐng)求，可以使用標(biāo)準(zhǔn)XHR對(duì)象并給open()方法傳入一個(gè)絕對(duì)URL，比如：

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

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

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

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

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

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

CORS通過一種叫預(yù)檢請(qǐng)求的服務(wù)器驗(yàn)證機(jī)制，允許使用自定義頭部、除GET和POST之外的方法，以及不同請(qǐng)求體內(nè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工作線程等Web工具中使用。XMLHttpRequest可以選擇異步，而Fetch API則必須是異步。
fetch()方法是暴露在全局作用域中的，包括主頁面執(zhí)行線程、模塊和工作線程。調(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的封裝，可以通過它取得相應(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 支持通過Response的status和statusText屬性檢查響應(yīng)狀態(tài)。成功獲取響應(yīng)的請(qǐng)求通常會(huì)產(chǎn)生值為200的狀態(tài)碼。
4、常見Fetch請(qǐng)求模式

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

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

發(fā)送文件

加載Blob文件

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

中斷請(qǐng)求

五、websocket

套接字websocket的目標(biāo)是通過一個(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不能通過標(biāo)準(zhǔn)HTTP服務(wù)器實(shí)現(xiàn)，而必須使用支持該協(xié)議的專有服務(wù)器。
因?yàn)閣ebsocket使用了自定義協(xié)議，所以URL方案稍有變化，不能再使用http://或https://，而要使用ws://和wss://。前者是不安全的連接，后者是安全連接。在執(zhí)行websocket URL時(shí)，必須包含URL方案，因?yàn)閷碛锌赡茉僦С制渌桨浮?br /> 使用自定義協(xié)議而非HTTP協(xié)議的好處是，客戶端與服務(wù)器質(zhì)檢可以發(fā)送非常少的數(shù)據(jù)，不會(huì)對(duì)HTTP造成任何負(fù)擔(dān)。使用更小的數(shù)據(jù)包讓websocket非常適合寬帶和延遲問題比較明顯的移動(dòng)應(yīng)用。使用自定義協(xié)議的缺點(diǎn)是，定義協(xié)議的時(shí)間比定義JavaScript API的時(shí)間要長(zhǎng)，websocket得到了所有主流瀏覽器的支持。

六、JavaScript思維導(dǎo)圖

為什么80%的碼農(nóng)做不了架構(gòu)師？>>>

Java專欄目錄 | 點(diǎn)擊這里

七、關(guān)注公眾號(hào)哪吒編程，回復(fù)1024，獲取思維導(dǎo)圖，還有不定期的送書活動(dòng)

一步到位！Java程序設(shè)計(jì)

極簡(jiǎn)Java

C++從入門到精通

算法入門

總結(jié)

以上是生活随笔為你收集整理的【30天精通JavaScript ~ 网络篇】JavaScript 网络请求与远程资源的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇：程序员的数学笔记2--余数
下一篇：后端：Java中的BigDecimal类