AJAX - 傳送 PUT 請求

PUT 請求用於更新 Web 伺服器上的資料。在此請求中，資料以請求主體形式傳送，Web 伺服器將用新資料替換現有資料。如果指定的資料不存在，則它會將替換資料作為新記錄新增到伺服器中。

就以下幾點而言，PUT 請求與 POST 請求有很大不同：

PUT 用於更新現有記錄，而 POST 用於在伺服器中新增新記錄。
PUT 請求可以被快取，而 POST 請求不能被快取。
PUT 請求是冪等的，而 POST 請求是非冪等的。
PUT 請求充當特定操作，而 POST 請求充當抽象操作。

語法

open('PUT', url, true)

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

PUT - 用於更新 Web 伺服器上的資料。
url - url 表示將在 Web 伺服器上開啟的檔案 url 或位置。
true - 對於非同步連線，將值設定為 true。或對於同步連線，將值設定為 false。此引數的預設值為 true。

如何傳送 PUT 請求

要傳送 PUT 請求，我們需要遵循以下步驟：

步驟 1 - 建立 XMLHttpRequest 物件。

var variableName = new XMLHttpRequest()

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

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

XMLHttpRequestObjectName.setRequestHeader('Content-type', 'application/json')

步驟 4 - 使用 setRequestHeader() 設定 HTTP 請求頭。它始終在 open() 方法之後但 send() 方法之前呼叫。這裡將 content-type 頭設定為“application/json”，表示資料將以 JSON 格式傳送。

步驟 5 - 最後，我們使用 stringify() 方法將 JSON 資料轉換為字串，然後使用 send() 方法將其傳送到 Web 伺服器以更新伺服器上存在的資料。

XMLHttpRequestObjectName.send(JSON.stringify(JSONdata))

以下流程圖將顯示示例的工作原理：

示例

<!DOCTYPE html>
<html>
<body>
<script>
   function updateDoc() {
      // Creating XMLHttpRequest object
      var uhttp = new XMLHttpRequest();
   
      // Creating call back function
      uhttp.onreadystatechange = function() {
         if (this.readyState == 4 && this.status == 200) {
            document.getElementById("sample").innerHTML = this.responseText;
            console.log("Data update Successfully")
         }
      };
      // Updating the given file
      uhttp.open("PUT", "https://jsonplaceholder.typicode.com/todos/21", true);
   
      // Setting HTTP request header 
      uhttp.setRequestHeader('Content-type', 'application/json')
   
      // Sending the JSON document to the server 
      uhttp.send(JSON.stringify({
         "title": "ApplePie",
         "userId": 12,
         "id": 32,
         "body": "ApplePie is made up of Apple"
      }));
   }
</script>
<h2>PUT Request</h2>
<button type="button" onclick="updateDoc()">Updating Record</button>
<div id="sample"></div>
</body>
</html>

輸出

單擊更新按鈕後，伺服器返回的輸出。

在上面的程式碼中，我們正在更新現有記錄，因此為了更新，我們建立一個 JSON 文件。要更新資料，我們單擊“更新記錄”按鈕。因此，當我們單擊“提交”按鈕時，將呼叫 updateDoc() 函式。此函式建立一個 XMLHttpRequest 物件。然後呼叫 XHR 物件的 open() 方法以使用 HTTP PUT 方法和伺服器的 URL（"https://jsonplaceholder.typicode.com/todos/21"）初始化請求。然後呼叫 setRequestHeader() 方法將請求的內容型別設定為 JSON。之後呼叫 send() 函式以將請求與 JSON 文件一起傳送。當伺服器收到請求時，它會使用新資料更新指定的記錄。

如果更新成功，則回撥函式將被呼叫（“就緒狀態 = 4（表示請求已完成）”和“狀態 = 200（表示成功響應）”）。然後更新後的資料將顯示在螢幕上。它還在控制檯中列印一條訊息，表示資料已成功更新。

這裡使用 JSON.stringify() 方法將 JSON 文件轉換為字串。這是必要的，因為 XHR 請求只能傳送文字資料。

注意 - 使用 PUT 方法時，必須在 URL 中提及記錄 ID，例如 "https://jsonplaceholder.typicode.com/todos/21"。這裡我們正在更新 ID 為 21 的記錄。

結論

這就是我們如何使用 XMLHttpRequest 傳送 PUT 請求的方法。它通常用於更新或修改伺服器上存在的資料。在下一篇文章中，我們將學習如何傳送 JSON 資料。

列印頁面