AJAX（Asynchronous JavaScript and XML）是一種用于在后臺與服務(wù)器進行異步通信的技術(shù)。它可以在不刷新整個頁面的情況下更新部分頁面內(nèi)容，提供了更好的用戶體驗。在使用AJAX的過程中，回調(diào)函數(shù)扮演了非常重要的角色。回調(diào)函數(shù)是在AJAX請求完成后被調(diào)用的函數(shù)，以處理返回的數(shù)據(jù)。本文將重點介紹如何使用回調(diào)函數(shù)傳遞JSON數(shù)據(jù)。

在AJAX中，通常使用JSON（JavaScript Object Notation）來傳輸數(shù)據(jù)。JSON是一種輕量級的數(shù)據(jù)交換格式，易于閱讀和編寫。通過使用回調(diào)函數(shù)以JSON格式傳遞數(shù)據(jù)，我們可以靈活地處理服務(wù)器返回的數(shù)據(jù)，并將其展示在網(wǎng)頁上。

假設(shè)我們正在開發(fā)一個留言板應(yīng)用程序，用戶可以通過輸入框提交留言，并實時獲取最新的留言。為了實現(xiàn)這個功能，我們需要使用AJAX向服務(wù)器發(fā)送異步請求，然后使用回調(diào)函數(shù)處理返回的JSON數(shù)據(jù)。

<script>
function getLatestMessages() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var response = JSON.parse(this.responseText);
// 處理服務(wù)器返回的JSON數(shù)據(jù)
displayMessages(response);
}
};
xhttp.open("GET", "get_latest_messages.php", true);
xhttp.send();
}
function displayMessages(messages) {
var messageContainer = document.getElementById("message-container");
messageContainer.innerHTML = ""; // 清空容器中的舊留言
for (var i = 0; i< messages.length; i++) {
var messageElement = document.createElement("div");
messageElement.innerHTML = messages[i].content;
messageContainer.appendChild(messageElement);
}
}
</script>

在上述例子中，我們定義了一個名為getLatestMessages的函數(shù)，它發(fā)送一個GET請求到get_latest_messages.php，將服務(wù)器返回的JSON數(shù)據(jù)傳遞給displayMessages回調(diào)函數(shù)。在displayMessages函數(shù)中，我們首先清空留言容器中的舊內(nèi)容，然后使用循環(huán)創(chuàng)建并添加新的留言元素。

通過這種方式，我們可以實現(xiàn)動態(tài)更新留言板的功能。每當用戶輸入新的留言，并點擊提交按鈕后，界面中的留言列表就會自動更新，顯示最新的留言內(nèi)容。

除了使用GET請求，我們還可以使用POST請求來發(fā)送數(shù)據(jù)到服務(wù)器，并通過回調(diào)函數(shù)處理返回的JSON數(shù)據(jù)。

<script>
function postMessage() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var response = JSON.parse(this.responseText);
if (response.success) {
alert("留言已成功提交！");
// 清空輸入框內(nèi)容
document.getElementById("message-input").value = "";
} else {
alert("留言提交失敗，請稍后再試。");
}
}
};
var message = document.getElementById("message-input").value;
var data = "message=" + encodeURIComponent(message);
xhttp.open("POST", "post_message.php", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send(data);
}
</script>

在上面的例子中，我們定義了一個名為postMessage的函數(shù)，它發(fā)送一個POST請求到post_message.php，并將用戶輸入的留言作為數(shù)據(jù)傳遞給服務(wù)器。在服務(wù)器返回的JSON數(shù)據(jù)中，我們根據(jù)success字段的值顯示不同的提示信息。

總結(jié)來說，通過使用回調(diào)函數(shù)傳遞JSON數(shù)據(jù)，我們可以輕松地處理服務(wù)器返回的數(shù)據(jù)，并將其展示在網(wǎng)頁上。無論是通過GET請求獲取數(shù)據(jù)，還是通過POST請求提交數(shù)據(jù)，回調(diào)函數(shù)都是AJAX編程中不可或缺的一部分。