AJAX（Asynchronous JavaScript and XML）是一種用于創建異步交互的技術，它使用JavaScript來向服務器發送請求并接收響應，以便更新部分網頁內容，而無需刷新整個頁面。通過使用AJAX回傳JSON數據，我們可以實現更加高效和靈活的網頁交互。本文將詳細介紹如何使用AJAX回傳JSON數據，并通過舉例說明其應用。

在使用AJAX回傳JSON數據之前，我們首先要了解JSON（JavaScript Object Notation）的概念。JSON是一種用于存儲和交換數據的輕量級的文本格式，它使用類似JavaScript對象的語法，可以將復雜的數據結構表示為鍵值對的集合。JSON在Web開發中廣泛應用，在AJAX中使用JSON回傳數據可以提高數據的傳輸效率。

一個常見的應用場景是在網頁上顯示動態數據。假設我們有一個電商網站，當用戶瀏覽商品頁面時，我們希望異步加載該商品的評論信息并顯示在頁面上，而無需刷新整個頁面。這時，我們可以通過AJAX向服務器發送請求，并回傳該商品的評論數據。

// 通過AJAX發送GET請求獲取評論數據
var xhr = new XMLHttpRequest();
xhr.open("GET", "get_comments.php?product_id=123", true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 獲取回傳的JSON數據
var comments = JSON.parse(xhr.responseText);
// 將評論數據顯示在頁面上
var commentList = document.getElementById("commentList");
comments.forEach(function(comment) {
var listItem = document.createElement("li");
listItem.textContent = comment.content;
commentList.appendChild(listItem);
});
}
};
xhr.send();

在上述代碼中，我們通過AJAX發送GET請求，指定了請求的URL（get_comments.php?product_id=123），并設置了處理響應結果的回調函數。當服務器返回響應時，我們首先將響應的JSON數據解析為JavaScript對象，然后遍歷評論數據，動態創建列表項并將其添加到頁面上。

除了獲取數據之外，我們還可以使用AJAX回傳JSON數據來更新服務器端的數據。假設我們有一個在線問答系統，用戶可以提出問題并發表回答。當用戶提交回答時，我們可以通過AJAX將回答的內容回傳給服務器，以便服務器更新相關問題的回答數。

// 通過AJAX發送POST請求回傳回答數據
var xhr = new XMLHttpRequest();
xhr.open("POST", "add_answer.php", true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 獲取回傳的JSON數據
var result = JSON.parse(xhr.responseText);
if (result.success) {
var answerCount = document.getElementById("answerCount");
// 更新回答數
answerCount.textContent = result.answerCount;
} else {
alert("提交回答失??！");
}
}
};
// 構建回傳的JSON數據對象
var answerData = {
questionId: 456,
answer: "這是我的回答。"
};
// 發送回傳的JSON數據
xhr.send(JSON.stringify(answerData));

在上面的例子中，我們使用AJAX發送了一個POST請求，指定了請求的URL（add_answer.php），并通過設置請求頭部的Content-Type為"application/json"告訴服務器請求主體是JSON數據。同時，我們也設置了處理響應結果的回調函數。在回調函數中，我們解析了服務器端回傳的JSON數據，并根據結果更新頁面上的回答數。

通過AJAX回傳JSON數據，我們可以實現更加高效和靈活的網頁交互。通過舉例說明了如何使用AJAX回傳JSON數據來獲取和更新數據。希望本文能對你理解AJAX回傳JSON數據的原理和應用有所幫助。