AJAX（Asynchronous JavaScript and XML）是一種用于從服務(wù)器異步獲取數(shù)據(jù)并更新網(wǎng)頁內(nèi)容的技術(shù)。利用AJAX可以在不刷新整個頁面的情況下更新部分網(wǎng)頁內(nèi)容，提高用戶體驗。而JSON（JavaScript Object Notation）是一種輕量級的數(shù)據(jù)交換格式，常用于前后端數(shù)據(jù)傳輸。本文將介紹如何使用AJAX接收J(rèn)SON數(shù)據(jù)，并以舉例的方式詳細(xì)說明。

AJAX通過XMLHttpRequest對象來實現(xiàn)異步請求，其中responseText屬性用于接收服務(wù)器返回的數(shù)據(jù)。當(dāng)服務(wù)器返回JSON格式的數(shù)據(jù)時，可以將responseText解析為JavaScript對象，進(jìn)而獲取其中的內(nèi)容。下面以獲取天氣預(yù)報為例進(jìn)行說明。

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
var temperature = response.temperature;
var condition = response.condition;
document.getElementById("temperature").innerHTML = temperature + "℃";
document.getElementById("condition").innerHTML = condition;
}
};
xhr.open("GET", "weather.php", true);
xhr.send();

在上述代碼中，首先創(chuàng)建了一個XMLHttpRequest對象（xhr），并定義了其onreadystatechange事件處理函數(shù)。當(dāng)xhr的狀態(tài)發(fā)生改變時，onreadystatechange事件將被觸發(fā)。在事件處理函數(shù)中，首先通過判斷xhr的狀態(tài)和HTTP狀態(tài)碼，確保請求已經(jīng)成功完成。然后使用JSON.parse方法將服務(wù)器返回的JSON數(shù)據(jù)解析為JavaScript對象，并根據(jù)其中的內(nèi)容更新網(wǎng)頁的顯示。此處假設(shè)服務(wù)器返回的JSON數(shù)據(jù)格式為：

{
"temperature": "26",
"condition": "晴"
}

假設(shè)網(wǎng)頁中有兩個元素，分別是顯示溫度的元素和顯示天氣狀況的元素。當(dāng)AJAX請求成功后，將獲取到的溫度和天氣狀況賦值給對應(yīng)的元素的innerHTML屬性，從而更新網(wǎng)頁內(nèi)容。

除了GET請求，AJAX還支持POST請求來發(fā)送JSON數(shù)據(jù)。下面以向服務(wù)器提交用戶評論為例進(jìn)行說明。

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
if (response.success) {
alert("評論提交成功！");
} else {
alert("評論提交失敗，請稍后再試。");
}
}
};
xhr.open("POST", "comment.php", true);
xhr.setRequestHeader("Content-Type", "application/json");
var comment = {
"content": "這是一條評論",
"user": "張三"
};
xhr.send(JSON.stringify(comment));

在上述代碼中，首先創(chuàng)建了一個XMLHttpRequest對象（xhr），并定義了其onreadystatechange事件處理函數(shù)。當(dāng)xhr的狀態(tài)發(fā)生改變時，onreadystatechange事件將被觸發(fā)。與上述GET請求不同的是，此處使用了POST請求。此外，還通過setRequestHeader方法設(shè)置請求頭的Content-Type為application/json，指明數(shù)據(jù)傳輸?shù)母袷綖镴SON。

將評論內(nèi)容和用戶信息封裝為一個JavaScript對象comment，并通過JSON.stringify方法將其轉(zhuǎn)換為JSON字符串。然后將該字符串作為參數(shù)傳遞給xhr的send方法，將數(shù)據(jù)發(fā)送給服務(wù)器的comment.php接口。服務(wù)器接收到請求后，根據(jù)JSON數(shù)據(jù)進(jìn)行處理，并將結(jié)果返回給前端。在此處假設(shè)服務(wù)器返回的JSON數(shù)據(jù)格式為：

{
"success": true
}

根據(jù)返回的JSON數(shù)據(jù)，可以提示用戶評論提交的結(jié)果。

AJAX通過XMLHttpRequest對象實現(xiàn)與服務(wù)器的異步通信，可以方便地接收J(rèn)SON數(shù)據(jù)，并實現(xiàn)根據(jù)數(shù)據(jù)更新網(wǎng)頁內(nèi)容的操作。以上只是兩個簡單的例子，AJAX和JSON的應(yīng)用場景非常廣泛。希望讀者通過本文的介紹，對AJAX如何接收J(rèn)SON數(shù)據(jù)有所了解，并能靈活運用到自己的項目中。