JavaScript詳細解析之網頁請求與遠端資源-js教程-PHP中文網

本篇文章為大家帶來了關於javascript的相關知識，其中主要介紹了關於網路請求與遠端資源的相關問題，包括了跨來源資源共享、預檢請求、Fetch API等等內容，下面一起來看一下，希望對大家有幫助。

JavaScript詳細解析之網頁請求與遠端資源

一、Ajax的誕生

2005年，Jesse James Garrett撰寫了一篇文章《Ajax - A New Approach to Web Applications》，這篇文章中描繪了一個被稱為Ajax（Asynchronous JavaScript XML，即異步JavaScript XML）的技術。這個技術涉及發送伺服器請求額外資料而不刷新頁面，從而實現更好地用戶體驗。 Garrett解釋了這個技術如何改變自Web誕生以來就一直延續的傳統點擊等待的模式。
把Ajax推到歷史舞台上的關鍵技術是XMLHttpRequest（XHR）物件。在XHR出現之前，Ajax風格的通訊必須透過一些黑科技來實現，主要是使用隱藏的窗格或內嵌窗格。 XHR為發送伺服器請求和取得相應提供了合理的介面。這個介面可以實現異步從伺服器獲取額外數據，意味著用戶不用頁面刷新也可以獲得數據。透過XHR物件取得資料後，可以使用DOM方法把資料插入網頁。
XHR物件的API普遍認為比較難用，而Fetch API自動誕生以後迅速成為了XHR更現代的替代標準，Fetch API支援期約promise和服務線程（service worker），已經成為及其強大的Web開發工具。

二、跨來源資源共享

透過XHR進行Ajax通訊的一個主要限制是跨來源安全策略。預設情況下，XHR只能存取與發起請求的頁面在相同網域內的資源。這個安全限制可以防止某些惡意行為。不過，瀏覽器也需要支援合法跨來源存取的能力。
跨來源資源共享（CORS，Cross-Origin Rerource Sharing）定義了瀏覽器與伺服器如何實現跨來源通訊。 CORS背後的基本想法就是使用自訂的HTTP頭部允許瀏覽器和伺服器相互了解，以確定請求或相應應該成功還是失敗。
對於簡單的請求，例如GET或POST請求，沒有自訂頭部，而且請求體是text/plain類型，這樣的請求在發送時會有一個額外的頭部叫Origin。 Origin頭部包含發送請求的頁面的來源（協定、網域名稱、連接埠），以便伺服器確定是否為其提供回應。
現代瀏覽器透過XMLHttpRequst物件原生支援CORS，在嘗試存取不同來源的資源時，這個行為會被自動觸發。要向不同域的來源發送請求，可以使用標準XHR物件並給open()方法傳入一個絕對URL，例如：

let xhr = new XMLHttpRequest();xhr.onreadystatechange = function(){ if(xhr.readyState == 4){ if((xhr.status >= 200 && xhr.status 跨域XHR物件允許存取status和statusText屬性，也允許同步請求，出於安全考慮，跨域XHR物件也施加了一些額外的限制。

登入後複製

不能使用setRequestHeader()設定自訂頭部；
不能傳送和接收cookie;
getAllResponseHeaders()方法始終返回空字串；

#因為無論同域還是跨域請求都是用同一個接口，所以最好在訪問本地資源時使用相對URL，在存取遠端資源時使用絕對URL，這樣可以更明確地區分使用場景，同時避免在存取本地資源時出現頭部或cookie資訊存取受限的問題。

三、預檢請求

CORS透過一種叫預檢請求的伺服器驗證機制，允許使用自訂頭部、除GET和POST之外的方法，以及不同請求體內容類型。在要傳送涉及上述某種進階選項的請求時，會先想伺服器發送一個預檢請求。這個請求使用OPTIONS方法發送並包含以下頭部：

##Origin：與簡單請求相同；
Access-Control-Request-Method ：請求希望使用的方法；
Access-Control-Request-Headers：（可選）要使用的逗號分隔的自訂頭部清單；

四、Fetch API

Fetch API能夠執行XMLHttpRequest物件的所有任務，但更容易使用，介面也更現代化，能夠在Web工作執行緒等Web工具中使用。 XMLHttpRequest可以選擇非同步，而Fetch API則必須是非同步。

fetch()方法是暴露在全域作用域中的，包括主頁面執行緒、模組和工作執行緒。呼叫這個方法，瀏覽器就會向給定URL發送請求。
1、分派請求
fetch()只有一個必要的參數input。多數情況下，這個參數是取得資源的URL，這個方法回傳一個期約：

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

登入後複製

URL的格式（相对路径、绝对路径等）的解释与XHR对象一样。
请求完成、资源可用时，期约会解决一个Response对象，这个对象是API的封装，可以通过它取得相应资源。获取资源要使用这个对象的属性和方法，掌握响应的情况并将负载均衡转为有用的形式。
2、读取响应
读取响应内容的最简单方式是取得纯文本格式的内容，只要用到text()方法。这个方法返回一个期约，会解决为取得资源的完整内容。
3、处理状态码和请求失败
Fetch API 支持通过Response的status和statusText属性检查响应状态。成功获取响应的请求通常会产生值为200的状态码。
4、常见Fetch请求模式

发送JSON数据
在请求体中发送参数
发送文件
加载Blob文件
发送跨域请求
中断请求

五、websocket

套接字websocket的目标是通过一个长时连接实现与服务器全双工、双向的通信。在JavaScript中创建websocket时，一个HTTP请求会发送到服务器以初始化连接。服务器响应后，连接使用HTTP中的Upgrade头部从HTTP协议切换到websocket协议，这意味着websocket不能通过标准HTTP服务器实现，而必须使用支持该协议的专有服务器。
因为websocket使用了自定义协议，所以URL方案稍有变化，不能再使用http://或https://，而要使用ws://和wss://。前者是不安全的连接，后者是安全连接。在执行websocket URL时，必须包含URL方案，因为将来有可能再支持其他方案。
使用自定义协议而非HTTP协议的好处是，客户端与服务器质检可以发送非常少的数据，不会对HTTP造成任何负担。使用更小的数据包让websocket非常适合宽带和延迟问题比较明显的移动应用。使用自定义协议的缺点是，定义协议的时间比定义JavaScript API的时间要长，websocket得到了所有主流浏览器的支持。