Ajax是一種前端開發(fā)技術(shù)，能夠?qū)崿F(xiàn)異步通信，實(shí)時(shí)地獲取數(shù)據(jù)并更新網(wǎng)頁(yè)內(nèi)容，為用戶提供更流暢的交互體驗(yàn)。使用Ajax獲取JSON數(shù)據(jù)并顯示是一種常見(jiàn)的應(yīng)用場(chǎng)景。
比如，我們可以通過(guò)Ajax獲取天氣數(shù)據(jù)并將其顯示在網(wǎng)頁(yè)上。假設(shè)我們有一個(gè)天氣API接口，可以根據(jù)城市名稱獲取該城市的天氣信息。我們可以使用Ajax發(fā)送一個(gè)HTTP請(qǐng)求到該接口，并在獲取到響應(yīng)后將JSON數(shù)據(jù)解析并顯示在網(wǎng)頁(yè)上。
下面是使用Ajax獲取JSON數(shù)據(jù)并顯示的一個(gè)示例代碼：

// 創(chuàng)建一個(gè)XMLHttpRequest對(duì)象
var xhr = new XMLHttpRequest();
// 監(jiān)聽xhr對(duì)象的onreadystatechange事件
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 獲取到響應(yīng)后執(zhí)行的操作
var response = JSON.parse(xhr.responseText);
document.getElementById("weather").innerText = response.weather;
document.getElementById("temperature").innerText = response.temperature;
}
};
// 發(fā)送HTTP請(qǐng)求
xhr.open("GET", "https://api.example.com/weather?city=beijing", true);
xhr.send();

在上面的代碼中，我們首先創(chuàng)建了一個(gè)XMLHttpRequest對(duì)象（簡(jiǎn)稱xhr），該對(duì)象可以發(fā)送HTTP請(qǐng)求并獲取后端服務(wù)器返回的數(shù)據(jù)。然后，我們監(jiān)聽了xhr對(duì)象的onreadystatechange事件，在響應(yīng)狀態(tài)變化時(shí)執(zhí)行相應(yīng)的操作。在這個(gè)例子中，當(dāng)xhr對(duì)象的readyState屬性為4（即請(qǐng)求已完成）且xhr對(duì)象的status屬性為200（即請(qǐng)求成功）時(shí)，我們將獲取到的JSON數(shù)據(jù)解析后，分別將天氣和溫度信息顯示在網(wǎng)頁(yè)上。
當(dāng)然，這只是一個(gè)簡(jiǎn)單的示例，實(shí)際的應(yīng)用場(chǎng)景更加復(fù)雜。在真實(shí)的項(xiàng)目中，我們可能需要處理不同的HTTP響應(yīng)狀態(tài)碼，設(shè)置請(qǐng)求頭信息，處理錯(cuò)誤，以及對(duì)返回的JSON數(shù)據(jù)進(jìn)行更加復(fù)雜的操作。但無(wú)論如何，使用Ajax獲取JSON數(shù)據(jù)并顯示的主要思路都是類似的：發(fā)送HTTP請(qǐng)求 ->監(jiān)聽響應(yīng)狀態(tài)變化 ->獲取響應(yīng)數(shù)據(jù) ->解析JSON數(shù)據(jù) ->更新網(wǎng)頁(yè)內(nèi)容。
總結(jié)來(lái)說(shuō)，通過(guò)Ajax獲取JSON數(shù)據(jù)并顯示可以實(shí)現(xiàn)更加靈活、實(shí)時(shí)的網(wǎng)頁(yè)內(nèi)容更新。無(wú)論是天氣預(yù)報(bào)、股票行情、新聞資訊等等，只要有對(duì)應(yīng)的API接口，我們都可以使用Ajax來(lái)實(shí)現(xiàn)數(shù)據(jù)的獲取和展示，為用戶提供更好的用戶體驗(yàn)。