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	getAllResponseHeaders() 用於獲取頭部資訊
3	getResponseHeader() 用於獲取特定的頭部資訊
4	open(method, url, async, user, psw) 用於初始化請求引數。這裡： method：請求型別 GET 或 POST 或其他型別 url：檔案位置 async：對於非同步請求設定為 true，對於同步請求設定為 false user：可選使用者名稱 psw：可選密碼
5	send() 用於向 Web 伺服器傳送請求。通常用於 GET 請求。
6	send(string) 用於向伺服器傳送請求。通常用於 POST 請求。
7	setRequestHeader() 用於向頭部新增鍵值對

XMLHttpRequest 物件屬性

XMLHttpRequest 物件具有以下屬性：

序號	屬性名稱和描述
1	onreadystatechange 設定處理請求狀態更改的回撥函式。
2	readyState 用於儲存 XMLHttpRequest 的狀態。它具有以下值： 0: 請求未初始化 1: 伺服器連線已建立 2: 請求已接收 3: 請求正在處理 4: 請求已完成，響應已就緒
3	responseText 用於將響應資料作為字串返回
4	responseXML 用於將響應資料作為 XML 資料返回
5	status 用於返回請求的狀態碼。例如： 200：表示 OK 403：表示 Forbidden 404：表示 Not Found
6	statusText 用於返回狀態文字。例如，OK、Not Found 等。

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”屬性中提取，並使用 sample 元素的“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 物件傳送請求。

列印頁面