AJAX - XMLHttpRequest

在 AJAX 中，XMLHttpRequest 扮演著非常重要的角色。XMLHttpRequest 用於在後臺與 Web 伺服器交換資料，同時使用者/客戶端在前景工作，然後更新網頁的部分內容以接收資料，而無需重新載入整個頁面。

我們也可以說，XMLHttpRequest (XHR) 可以被各種 Web 瀏覽器指令碼語言（如 JavaScript、JScript、VBScript 等）用於在 HTTP 的幫助下與 Web 伺服器交換 XML 資料。除了 XML 之外，XMLHttpRequest 還可以獲取各種格式的資料，例如 JSON 等。它在客戶端和伺服器端之間建立了一個非同步連線。

語法

variableName = new XMLHttpRequest()

其中，使用 new 關鍵字以及 XMLHttpRequest() 建構函式，我們可以建立新的 XMLHttpRequest 物件。在呼叫 open() 函式初始化它之前，必須建立此物件，然後在呼叫 send() 函式將請求傳送到 Web 伺服器之前。

XMLHttpRequest 物件方法

XMLHttpRequest 物件具有以下方法：

序號	方法及描述
1	new XMLHttpRequest() 用於建立 XMLHttpRequest() 物件
2	abort() 用於取消當前請求。
3	getAllResponseHeaders() 用於獲取頭資訊
4	getResponseHeader() 用於獲取特定的頭資訊
5	open(method, url, async, user, psw) open(method, url, async, user, psw) 用於初始化請求引數。這裡， method：請求型別 GET 或 POST 或其他型別 url：檔案位置 async：對於非同步設定為 true，對於同步設定為 false user：可選使用者名稱 psw：可選密碼
6	send() 用於向 Web 伺服器傳送請求。通常用於 GET 請求。
7	send(string) 用於向伺服器傳送請求。通常用於 POST 請求。
8	setRequestHeader() 用於向頭資訊新增鍵/值對。

XMLHttpRequest 物件屬性

XMLHttpRequest 物件具有以下屬性：

序號	屬性及描述
1	onreadystatechange 設定處理請求狀態更改的回撥函式。
2	readyState 用於儲存 XMLHttpRequest 的狀態。它具有以下值：表示請求未初始化表示伺服器連線已建立表示請求已接收表示請求正在處理中表示請求已完成，響應已準備就緒
3	responseText 用於將響應資料作為字串返回。
4	responseXML 用於將響應資料作為 XML 資料返回
5	Status 用於返回請求的狀態編號。例如： 200：表示 OK 403：表示禁止 404：表示未找到
6	StatusText 用於返回狀態文字。例如，OK、未找到等。

XMLHttpRequest 的用法

在瞭解了 XMLHttpRequest 的基本語法、方法和屬性之後，我們現在學習如何在現實生活中使用 XMLHttpRequest。因此，要在程式中使用 XMLHttpRequest，首先我們需要遵循以下主要步驟：

步驟 1 - 建立 XMLHttpRequest 的物件。

var variableName = new XMLHttpRequest()

步驟 2 - 建立 XMLHttpRequest 物件後，我們現在必須定義一個回撥函式，該函式將在從 Web 伺服器獲取響應後觸發。

XMLHttpRequestObjectName.onreadystatechange = function(){
   // Callback function body
}

XMLHttpRequestObjectName.open(method, url, async)
XMLHttpRequestObjectName.send()

步驟 3 - 現在我們使用 open() 和 send() 函式向 Web 伺服器傳送請求。

現在讓我們藉助以下示例瞭解 XMLHttpRequest 的工作原理

示例

在下面的示例中，我們將從伺服器獲取資料。要從伺服器獲取資料，我們將點選“點選我”按鈕。因此，當我們點選“點選我”按鈕時，將呼叫 displayDoc() 函式。在 displayDoc() 函式內部，我們建立了一個 XMLHttpRequest 物件。然後我們建立一個回撥函式來處理伺服器響應。然後我們呼叫 XHR 物件的 open() 方法，以 HTTP GET 方法和伺服器 URL（即 "https://jsonplaceholder.typicode.com/todos"）初始化請求。然後我們呼叫 send() 函式傳送請求。

因此，當伺服器響應請求時，“onreadystatechange”屬性將使用 XMLHttpRequest 物件的當前狀態呼叫回撥函式。如果“readyState”屬性設定為 4（表示請求已完成）且“status”屬性設定為 200（表示成功響應），則從“responseText”屬性中提取響應資料，並使用“innerHTML”屬性在 HTML 文件中顯示樣本元素。

如果在請求期間發現錯誤，則回撥函式中存在的 else 語句將執行。因此，這就是我們如何從伺服器獲取資料的方法。

<!DOCTYPE html>
<html>
<body>
<script>
function displayDoc() {
   // Creating XMLHttpRequest object
   var myObj = new XMLHttpRequest();

   // Creating a callback function
   myObj.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
         document.getElementById("sample").innerHTML = this.responseText;
      } else {
         console.log("Error Found")
      }
   };
   // Open the given file
   myObj.open("GET", "https://jsonplaceholder.typicode.com/todos", true);

   // Sending the request to the server
   myObj.send();
}
</script>
<div id="sample">
   <h2>Getting Data</h2>
   <p>Please click on the button to fetch data</p>
   <button type="button" onclick="displayDoc()">Click Me</button>
</div>
</body>
</html>

輸出

結論

XMLHttpRequest 是 AJAX 的主要物件，透過它 AJAX 在 Web 瀏覽器和 Web 伺服器之間建立非同步通訊。因此，在下一篇文章中，我們將學習如何使用 XMLHttpRequest 物件傳送請求。

列印頁面