AJAX - 傳送請求

AJAX 應用程式使用 XMLHttpRequest 物件發起或管理傳送到 Web 伺服器的資料請求，並以非常有效的方式處理或監控 Web 伺服器傳送的資料。AJAX 支援以下型別的請求：

GET 請求
POST 請求
PUT 請求
DELETE 請求

要建立連線並向 Web 伺服器傳送請求，XMLHttpRequest 物件提供了以下兩種方法

open() - 用於在 Web 瀏覽器和 Web 伺服器之間建立連線。

send() - 用於向 Web 伺服器傳送請求。

open() 方法

open() 方法用於建立與 Web 伺服器的非同步連線。一旦建立了安全連線，您就可以使用 XMLHttpRequest 的各種屬性，或者傳送請求，或者處理響應。

語法

open(method, url, async)

其中，open() 方法接受三個引數：

method - 表示用於與 Web 伺服器建立連線的 HTTP 方法（GET 或 POST）。
url - 表示將在 Web 伺服器上開啟的檔案 URL。或者我們可以說伺服器（檔案）位置。
async - 對於非同步連線，將值設定為 true。或者對於同步連線，將值設定為 false。此引數的預設值為 true。

要使用 open() 方法，首先我們建立 XMLHttpRequest 物件的一個例項。然後我們呼叫 open() 方法來初始化請求，使用 HTTP GET 或 POST 方法以及伺服器的 URL。

GET 選項用於從 Web 伺服器檢索適量的資訊，而 POST 選項用於檢索大量的資訊。因此，GET 和 POST 選項都可以配置 XMLHttpRequest 物件以使用給定的檔案。

在 open() 方法中，可以透過使用絕對路徑或相對路徑來指定 AJAX 應用程式的檔名或位置或路徑。其中絕對路徑是指定檔案確切位置的路徑，例如：

Myrequest.open("GET", "https://tutorialspoint.tw/source.txt")

這裡“source.txt”是檔名，"https://tutorialspoint.tw" 是儲存 source.txt 檔案的位置。

相對路徑用於根據 Web 伺服器上相對於 Web 應用程式檔案的位置來指定檔案的位置，例如：

Myrequest.open("GET", "my file.txt")

語法

Myrequest.send()

send() 方法

send() 方法用於將請求傳送到伺服器。您還可以向 send() 方法傳遞引數。

傳送請求

要向伺服器傳送請求，首先我們需要建立一個 XMLHttpRequest 物件的例項，然後我們建立一個回撥函式，該函式將在從 Web 伺服器獲取響應後生效。然後我們使用 open() 方法在 Web 瀏覽器和 Web 伺服器之間建立非同步連線，然後使用 send() 函式將請求傳送到伺服器。

示例

在以下程式碼中，我們從伺服器獲取指定記錄。要從伺服器獲取資料，我們點選“點選此處”按鈕。因此，當我們點選“點選此處”按鈕時，將呼叫 showDoc() 函式。在 displayDoc() 函式內部，首先建立 XMLHttpRequest 的一個物件。然後我們建立一個回撥函式來處理伺服器響應。然後我們呼叫 XHR 物件的 open() 方法來初始化請求，使用 HTTP GET 方法以及伺服器的 URL，即 "https://jsonplaceholder.typicode.com/todos/3"，它從 JSONPlaceholder API 獲取一個 id = 3 的單個待辦事項列表。然後我們呼叫 send() 函式傳送請求。

<!DOCTYPE html>
<html>
<body>
<script>
   function ShowDoc() {
   // Creating XMLHttpRequest object
   var myhttp = new XMLHttpRequest();
   // Creating call back function
   myhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
         document.getElementById("example").innerHTML = this.responseText;
      }
   };
  // Open the given file
  myhttp.open("GET", "https://jsonplaceholder.typicode.com/todos/3", true);
  // Sending the request to the server
  myhttp.send();
}
</script>

<div id="example">
  <p>Please click on the button to fetch data</p>
  <button type="button" onclick="ShowDoc()">Click Here</button>
</div>
</body>
</html>

輸出

點選“點選此處”按鈕後，我們將從伺服器獲取以下記錄。

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

結論

因此，這就是我們如何使用 XMLHttpRequest 傳送請求的方法。在所有這些請求中，GET 和 POST 是最常用於從伺服器獲取和傳送資料到/來自伺服器的請求。現在在下一篇文章中，我們將瞭解 AJAX 支援的請求型別。

列印頁面