原文合集地址如下，有需要的朋友可以關(guān)注

本文地址

合集地址

在我們平時做項目時，基本選擇使用像axios和fetch這樣的工具庫來處理數(shù)據(jù)交互。這些工具庫提供了簡潔而強(qiáng)大的API，使得開發(fā)人員能夠輕松地進(jìn)行HTTP請求和處理響應(yīng)。然而，很少有人真正了解它們背后的底層原理，以及它們是如何實現(xiàn)數(shù)據(jù)交互的。 其實axios和fetch都是基于XMLHttpRequest（XHR）和瀏覽器內(nèi)置的fetch API的封裝。XHR是一個JavaScript對象，允許瀏覽器與服務(wù)器進(jìn)行異步通信。它可以發(fā)送HTTP請求，并在接收到響應(yīng)后觸發(fā)回調(diào)函數(shù)進(jìn)行處理。axios利用XHR對象提供了一種簡單而直觀的方式來發(fā)送各種類型的HTTP請求，并處理響應(yīng)數(shù)據(jù)。 下面主要介紹一下Ajax和XMLHttpRequest對象。

Ajax

Ajax（Asynchronous JavaScript and XML）是一種在Web應(yīng)用程序中進(jìn)行異步通信的技術(shù)。它使用JavaScript和XML（現(xiàn)在通常使用JSON）來實現(xiàn)在不刷新整個頁面的情況下與服務(wù)器進(jìn)行數(shù)據(jù)交換的能力。

Ajax的工作原理如下：

1. 客戶端發(fā)起Ajax請求：通過JavaScript代碼，在客戶端發(fā)起一個異步請求到服務(wù)器。這可以通過XMLHttpRequest對象或現(xiàn)代的Fetch API來實現(xiàn)。

2. 服務(wù)器處理請求：服務(wù)器接收到Ajax請求，并根據(jù)請求的內(nèi)容進(jìn)行處理，通常是處理特定的URL或API端點。

3. 服務(wù)器響應(yīng)：服務(wù)器將處理結(jié)果封裝在HTTP響應(yīng)中，并返回給客戶端。響應(yīng)通常是在JSON格式下返回數(shù)據(jù)，但也可以是XML或其他格式。

4. 客戶端處理響應(yīng)：客戶端接收到服務(wù)器的響應(yīng)后，使用JavaScript代碼對響應(yīng)進(jìn)行解析和處理?？梢愿鶕?jù)響應(yīng)的數(shù)據(jù)更新網(wǎng)頁的特定部分，動態(tài)修改內(nèi)容或執(zhí)行其他操作。

5. 客戶端更新頁面：在客戶端接收到響應(yīng)后，根據(jù)需要更新網(wǎng)頁的特定部分，而不需要重新加載整個頁面。這使得網(wǎng)頁可以實現(xiàn)部分刷新和動態(tài)交互，提供更好的用戶體驗。

Ajax的優(yōu)點包括：

• 異步通信：Ajax請求是異步的，不會阻塞頁面的其他操作。這允許網(wǎng)頁在后臺發(fā)送請求并繼續(xù)執(zhí)行其他任務(wù)。

• 部分刷新：通過更新頁面的特定部分，可以避免重新加載整個頁面，提高性能和用戶體驗。

• 動態(tài)交互：通過與服務(wù)器進(jìn)行實時數(shù)據(jù)交換，可以實現(xiàn)動態(tài)更新內(nèi)容和交互式功能。

• 減少帶寬：由于只更新部分頁面內(nèi)容，Ajax請求可以減少數(shù)據(jù)傳輸量，節(jié)省帶寬和加載時間。 XMLHttpRequest是一種用于在JavaScript中進(jìn)行HTTP請求的內(nèi)置對象。它允許客戶端與服務(wù)器進(jìn)行異步通信，并在不刷新整個頁面的情況下獲取數(shù)據(jù)或更新部分頁面內(nèi)容。

使用XMLHttpRequest可以執(zhí)行各種類型的HTTP請求，如GET、POST、PUT、DELETE等。以下是一個使用XMLHttpRequest發(fā)送GET請求的示例：

var?xhr?=?new?XMLHttpRequest();
xhr.open('GET',?'https://api.example.com/data',?true);??//?創(chuàng)建一個GET請求，指定URL和異步標(biāo)志為true
xhr.onreadystatechange?=?function()?{
??if?(xhr.readyState?===?XMLHttpRequest.DONE)?{??//?請求狀態(tài)為完成
????if?(xhr.status?===?200)?{??//?成功接收到響應(yīng)
??????var?responseData?=?JSON.parse(xhr.responseText);??//?解析響應(yīng)數(shù)據(jù)
??????//?處理響應(yīng)數(shù)據(jù)，更新頁面內(nèi)容或執(zhí)行其他操作
??????console.log(responseData);
????}?else?{
??????//?處理請求錯誤
??????console.log('請求失敗：'?+?xhr.status);
????}
??}
};
xhr.send();??//?發(fā)送請求


在上面的示例中，首先創(chuàng)建了一個XMLHttpRequest對象，并通過open()方法指定了GET請求的URL和異步標(biāo)志。然后，設(shè)置了onreadystatechange事件處理程序，它會在請求的狀態(tài)發(fā)生變化時被調(diào)用。當(dāng)請求的狀態(tài)變?yōu)閄MLHttpRequest.DONE（值為4）時，表示請求完成，可以處理響應(yīng)。

在onreadystatechange事件處理程序中，首先檢查響應(yīng)狀態(tài)是否為200，表示成功接收到響應(yīng)。然后，使用XMLHttpRequest對象的responseText屬性獲取響應(yīng)的文本數(shù)據(jù)，并使用JSON.parse()解析響應(yīng)數(shù)據(jù)（假設(shè)響應(yīng)是JSON格式的）。最后，可以根據(jù)需要處理解析后的響應(yīng)數(shù)據(jù)，例如更新頁面內(nèi)容。

最后，調(diào)用send()方法發(fā)送請求。該示例中的GET請求沒有請求體，如果需要發(fā)送請求參數(shù)，可以在open()方法中添加URL參數(shù)或使用setRequestHeader()方法設(shè)置請求頭字段。

XMLHttpRequest對象

XMLHttpRequest對象是瀏覽器提供的內(nèi)置對象，用于在JavaScript中進(jìn)行HTTP通信。它允許在不刷新整個頁面的情況下與服務(wù)器進(jìn)行數(shù)據(jù)交換，實現(xiàn)異步通信。

XMLHttpRequest對象的主要屬性和方法如下：

屬性：

• readyState: 表示請求的當(dāng)前狀態(tài)。有五個可能的值：

• 0: 請求未初始化（XMLHttpRequest對象已創(chuàng)建，但尚未調(diào)用open方法）

• 1: 服務(wù)器連接已建立（調(diào)用了open方法）

• 2: 請求已接收（調(diào)用了send方法，且服務(wù)器已接收到請求）

• 3: 請求處理中（服務(wù)器正在處理請求）

• 4: 請求已完成，且響應(yīng)就緒（服務(wù)器處理完畢并返回響應(yīng)）

• status: 表示響應(yīng)的HTTP狀態(tài)碼。

• statusText: 表示響應(yīng)的HTTP狀態(tài)文本。

• responseText: 包含響應(yīng)的文本數(shù)據(jù)。

• responseType: 設(shè)置響應(yīng)的數(shù)據(jù)類型（如"text"、"json"、"arraybuffer"等）。

• responseURL: 包含響應(yīng)的URL。

• timeout: 設(shè)置請求的超時時間，單位為毫秒。

方法：

• open(method, url, async): 初始化一個請求。method表示請求方法，url表示請求的URL，async表示是否異步，默認(rèn)為true。

• send(data): 發(fā)送請求。data表示要發(fā)送的數(shù)據(jù)，對于GET請求通常為null，對于POST請求通常為請求體中的數(shù)據(jù)。

• setRequestHeader(header, value): 設(shè)置請求頭字段。

• getAllResponseHeaders(): 獲取所有響應(yīng)頭字段。

• getResponseHeader(header): 獲取指定的響應(yīng)頭字段的值。

• abort(): 終止請求。

XMLHttpRequest對象的使用步驟如下：

1. 創(chuàng)建XMLHttpRequest對象：

var?xhr?=?new?XMLHttpRequest();


1. 初始化請求：

xhr.open(method,?url,?async);


1. 設(shè)置請求頭字段（如果需要）：

xhr.setRequestHeader(header,?value);


1. 設(shè)置響應(yīng)類型（如果需要）：

xhr.responseType?=?type;


1. 設(shè)置請求超時時間（如果需要）：

xhr.timeout?=?time;


1. 注冊事件處理程序：

xhr.onload?=?function()?{
??//?響應(yīng)處理邏輯
};

xhr.onerror?=?function()?{
??//?錯誤處理邏輯
};

xhr.ontimeout?=?function()?{
??//?超時處理邏輯
};

//?可以注冊其他事件處理程序，如onprogress等


1. 發(fā)送請求：

xhr.send(data);


1. 在事件處理程序中處理響應(yīng)或錯誤。

需要注意的是，XMLHttpRequest對象在處理跨域請求時會受到同源策略的限制。如果需要跨域請求，可以使用CORS（Cross-Origin Resource Sharing）或代理服務(wù)器來進(jìn)行處理。

盡管XMLHttpRequest對象是用于Ajax的傳統(tǒng)方式，但現(xiàn)代Web開發(fā)更傾向于使用Fetch API、Axios等現(xiàn)代化的工具和庫，它們提供了更簡潔、靈活和易用的API，能夠更方便地處理Ajax請求和響應(yīng)。