AJAX - 請求型別

AJAX 是一種用於建立動態網頁的 Web 技術。它允許網頁更新其內容而無需重新載入整個頁面。通常，AJAX 支援四種類型的請求，它們是：

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

GET 請求

GET 請求用於從伺服器檢索資料。在此請求中，資料作為 URL 的一部分發送，附加在請求的末尾。我們可以使用 open() 方法使用此請求。

語法

open(GET, url, true)

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

GET - 用於從伺服器檢索資料。
url - url 表示將在 Web 伺服器上開啟的檔案。
true - 對於非同步連線，將值設定為 true。或者對於同步連線，將值設定為 false。此引數的預設值為 true。

示例

<!DOCTYPE html>
<html>
<body>
<script>
   function displayRecords() {
      // Creating XMLHttpRequest object
      var zhttp = new XMLHttpRequest();
      // Creating call back function
      zhttp.onreadystatechange = function() {
         if (this.readyState == 4 && this.status == 200) {
            document.getElementById("example").innerHTML = this.responseText;
         }
      };
      // Open the given file
      zhttp.open("GET", "https://jsonplaceholder.typicode.com/todos/6", true);
      // Sending the request to the server
      zhttp.send();
   }
</script>
<div id="example">
   <p>Please click on the button to fetch 6th record from the server</p>
   <button type="button" onclick="displayRecords()">Click Here</button>
</div>
</body>
</html>

輸出

在上面的示例中，我們使用 GET 請求從伺服器獲取第 6 條記錄 "https://jsonplaceholder.typicode.com/todos/6" API 在 XMLHttpRequest 中。因此，單擊按鈕後，我們將從伺服器獲取第 6 條記錄。

POST 請求

POST 請求用於將資料從網頁傳送到 Web 伺服器。在此請求中，資料以與 URL 分開的請求正文的形式傳送。我們可以使用 open() 方法使用此請求。

語法

open('POST', url, true)

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

POST - 用於將資料傳送到 Web 伺服器。
url - url 表示伺服器（檔案）位置。
true - 對於非同步連線，將值設定為 true。或者對於同步連線，將值設定為 false。此引數的預設值為 true。

示例

<!DOCTYPE html>
<html>
<body>
<script>
   function sendDoc() {
      // Creating XMLHttpRequest object
      var qhttp = new XMLHttpRequest();
      // Creating call back function
      qhttp.onreadystatechange = function() {
         if (this.readyState == 4 && this.status == 201) {
            document.getElementById("sample").innerHTML = this.responseText;
            console.log("Data Send Successfully")
         }
      };
      // Open the given file
      qhttp.open("POST", "https://jsonplaceholder.typicode.com/todos", true);
      // Setting HTTP request header 
      qhttp.setRequestHeader('Content-type', 'application/json')
      // Sending the JSON document to the server 
      qhttp.send(JSON.stringify({
         "title": "MONGO",
         "userId": 11,
         "id": 21,
         "body": "est rerum tempore"
      }));
   }
</script>
<h2>Example of POST Request</h2>
<button type="button" onclick="sendDoc()">Post Data</button>
<div id="sample"></div>
</body>
</html>

輸出

在上面的示例中，我們使用 PUT 請求更新具有以下給定資料的記錄。

"https://jsonplaceholder.typicode.com/todos/21" API:
{
   "title": "MONGO",
   "userId": 11,
   "id": 21,
   "body": "est rerum tempore"
}

DELETE 請求

DELETE 請求用於從 Web 伺服器刪除資料。在此請求中，要刪除的資料以請求正文的形式傳送，Web 伺服器將從其儲存中刪除該資料。

語法

open('DELETE', url, true)

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

DELETE - 用於從 Web 伺服器刪除資料。
url - 它表示將在 Web 伺服器上開啟的檔案 url。或者我們可以說伺服器（檔案）位置。
true - 對於非同步連線，將值設定為 true。或者對於同步連線，將值設定為 false。此引數的預設值為 true。

示例

<!DOCTYPE html>
<html>
<body>
<script>
   function delDoc() {
      // Creating XMLHttpRequest object
      var qhttp = new XMLHttpRequest();
      // Creating call back function
      qhttp.onreadystatechange = function() {
         if (this.readyState == 4 && this.status == 200) {
            document.getElementById("sample").innerHTML = this.responseText;
            console.log("Record Deleted Successfully")
         }
      };
      // Deleting given file
      qhttp.open("DELETE", "https://jsonplaceholder.typicode.com/todos/2", true);
      // Sending the request to the server 
      qhttp.send();
   }
</script>
<div id="sample">
   <h2>Example of DELETE Request</h2>
   <button type="button" onclick="delDoc()">Deleteing Data</button>
</div>
</body>
</html>

輸出

在上面的示例中，我們使用 DELETE 請求 "https://jsonplaceholder.typicode.com/todos/2" API 刪除 ID = 2 的記錄。

AJAX 還支援其他一些請求，例如 OPTIONS、HEAD 和 TRACE，但它們是最不常用的 AJAX 應用程式請求。在下一篇文章中，我們將瞭解 AJAX 如何處理響應。

列印頁面