AJAX - 傳送JSON資料

AJAX 是非同步 JavaScript 和 XML。它結合了多種 Web 技術，用於開發動態 Web 應用程式，可在後臺傳送和檢索伺服器資料，而無需重新載入整個頁面。

JSON（JavaScript 物件表示法）是一種儲存資料並可在不同計算機系統之間傳輸資料的格式。它易於理解且與語言無關。AJAX 可以傳輸任何型別的資料，無論是 JSON 還是純文字。因此，在本文中，我們將學習如何使用 AJAX 傳送 JSON 資料。

傳送 JSON 資料

要使用 AJAX 傳送 JSON 資料，請按照以下步驟操作：

步驟 1 - 建立一個新的 XMLHttpRequest 例項。

步驟 2 - 設定請求方法，即 open() 方法和 URL。

步驟 3 - 設定請求頭以指定資料格式。此處將 content-type 頭設定為“application/json”，這表示將以 JSON 格式傳送資料。

步驟 4 - 建立一個處理響應的回撥函式。

步驟 5 - 編寫 JSON 資料。

步驟 6 - 使用 JSON.stringify() 方法將 JSON 資料轉換為字串。

步驟 7 - 現在使用 send() 方法傳送請求，並將 JSON 資料作為請求主體。

以下是顯示以下程式碼工作流程的流程圖：

示例

<!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("JSON 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 data to the server 
   qhttp.send(JSON.stringify({
      "title": "Mickey",
      "userId": 11,
      "id": 21,
      "body": "Mickey lives in london"
   }));
}
</script>
<h2>Sending JSON Data</h2>
<button type="button" onclick="sendDoc()">Uplodaing Data</button>
<div id="sample"></div>
</body>
</html>

輸出

在上面的示例中，我們使用 POST 方法將以下 JSON 文件傳送到給定 URL 的伺服器：

{
   "title": "Mickey",
   "userId": 11,
   "id": 21,
   "body": "Mickey lives in london"
}

因此，當我們單擊“更新資料”按鈕時，將呼叫 sendDoc() 函式。此函式建立一個 XMLHttpRequest 物件。然後呼叫 XHR 物件的 open() 方法以使用 HTTP POST 方法和伺服器 URL（"https://jsonplaceholder.typicode.com/todos"）初始化請求。然後呼叫 setRequestHeader() 方法將請求的內容型別設定為 JSON。之後呼叫 send() 函式以傳送請求以及 JSON 文件。當伺服器收到請求時，它會新增該文件。

如果更新成功，則回撥函式將以“readyState = 4（表示請求已完成）”和“status = 201（表示伺服器已成功建立新資源）”呼叫。然後，伺服器的響應將使用 sample 元素的 innerHTML 屬性顯示在 HTML 檔案中。它還在控制檯中列印一條訊息，表示 JSON 資料已成功傳送。

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

結論

這就是我們如何使用 XMLHttpRequest 傳送 JSON 資料的方法。它是最常用的資料傳輸格式，因為它輕量且易於理解。在下一篇文章中，我們將學習如何解析 XML 物件。

列印頁面