AJAX - 傳送 POST 請求

POST 請求將資料從網頁傳送到 Web 伺服器。在此請求中，資料傳送在與 URL 分開的請求正文中。您無法快取和收藏 POST 請求。此外，使用 POST 請求，您可以傳送任何長度的資料。

語法

open('POST', url, true)

此方法採用三個引數：

POST − 用於向 Web 伺服器傳送資料。
url − 表示將在 Web 伺服器上開啟的檔案 URL。
true − 對於非同步連線，將此引數的值設定為 true。或者對於同步連線，將值設定為 false。此引數的預設值為 true。

如何使用 POST 請求

要使用 POST 請求，我們需要遵循以下步驟：

步驟 1 − 建立 XMLHttpRequest 物件。

var variableName = new XMLHttpRequest()

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

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

步驟 3 − 現在我們使用 open() 函式。在 open() 函式中，我們傳遞 POST 請求以及要向其傳送資料的 URL。

XMLHttpRequestObjectName.open("POST", url, async)
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 sendRecords() {
      // Creating XMLHttpRequest object
      var zhttp = new XMLHttpRequest();
   
      // JSON document
      const mParameters = {
         title: document.querySelector('#Utitle').value,
         userid: document.querySelector('#UId').value,
         body: document.querySelector('#Ubody').value
      }
      // Creating call back function
      zhttp.onreadystatechange = function() {
         if (this.readyState == 4 && this.status == 201) {
            document.getElementById("example").innerHTML = this.responseText;
            console.log("Data Posted Successfully")
         }
         console.log("Error found")
      };
      // Post/Add JSON document on the given API
      zhttp.open("POST", "https://jsonplaceholder.typicode.com/todos", true);
   
      // Setting HTTP request header 
      zhttp.setRequestHeader('Content-type', 'application/json')
   
      // Sending the request to the server
      zhttp.send(JSON.stringify(mParameters));
   }
</script>

   <!--Creating simple form-->
   <h2>Enter data</h2>
   <label for="Utitle">Title</label>
   <input id="Utitle" type="text" name="title"><br>
   
   <label for="UId">UserId</label>
   <input id="UId" type="number" name="UserID"><br>
   
   <label for="Ubody">Body</label>
   <input id="Ubody" type="text" name="body"><br>
   
   <button type="button" onclick="sendRecords()">Submit</button>
   <div id="example"></div>
</body>
</html>

使用 HTTP POST 方法和伺服器的 URL "https://jsonplaceholder.typicode.com/todos" 初始化請求。然後，我們呼叫 setRequestHeader() 方法將請求的內容型別設定為 JSON。之後，我們呼叫 send() 函式將請求以及 JSON 文件（以字串形式）傳送到伺服器。

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

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

PUT 請求和 POST 請求的區別

以下是 PUT 請求和 POST 請求的區別：

PUT 請求	POST 請求
用於更新現有記錄。	用於建立新記錄。
將整個資源作為有效負載傳送。	僅傳送要更新的部分。
可以快取	不可快取
它是冪等的	它是非冪等的
如果我們多次傳送此請求，則將在指定的伺服器上建立多個 URL。	如果我們多次傳送此請求，則將在指定的伺服器上建立多個 URL。如果我們多次傳送此請求，伺服器仍然將其計為單個修改請求。

結論

這就是 XMLHttpRequest 傳送 POST 請求的方式。它是傳送或釋出資料到伺服器最常用的方法。在下一篇文章中，我們將學習如何傳送 PUT 請求。

列印頁面