Ajax簡單來說是一種用于在不刷新整個網頁的情況下，通過后臺獲取數據并將其顯示在頁面上的技術。它的優點在于能夠提高用戶體驗、減少網絡傳輸量、提高頁面性能等。在本文中，我們將介紹如何使用Ajax獲取JSON數據，并將其展示在網頁上。 以一個簡單的例子來說明，假設我們有一個網站，需要在用戶點擊按鈕后，獲取一些城市的天氣信息，并將其顯示在頁面上。我們可以使用Ajax來實現這個功能。首先，我們需要在頁面上放置一個按鈕，當用戶點擊時觸發Ajax請求。

按鈕代碼：

<button id="getWeatherButton">獲取天氣</button>

然后，我們需要在頁面上創建一個用于顯示天氣信息的區域。這個區域可以是一個div或者一個表格。

天氣信息顯示區域代碼：

<div id="weatherInfo"></div>

接下來，我們需要編寫JavaScript代碼來處理Ajax請求和將返回的JSON數據顯示在頁面上。

JavaScript代碼：

// 當按鈕被點擊時，觸發Ajax請求獲取天氣信息
document.getElementById('getWeatherButton').addEventListener('click', function() {
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/api/weather', true);
xhr.onload = function() {
if (xhr.status >= 200 && xhr.status < 400) {
// 將返回的JSON數據解析為JavaScript對象
var weatherData = JSON.parse(xhr.responseText);
// 將天氣信息顯示在頁面上
var weatherInfoElement = document.getElementById('weatherInfo');
weatherInfoElement.innerHTML = '城市：' + weatherData.city + '<br>天氣：' + weatherData.weather;
}
};
xhr.send();
});

在這段代碼中，我們首先創建了一個XMLHttpRequest對象，然后打開一個GET請求，指定了請求的URL。在請求返回成功時，我們通過JSON.parse()方法將返回的JSON數據解析為JavaScript對象。 最后，我們將解析后的天氣信息插入到頁面的div元素中，使用innerHTML屬性和字符串拼接的方式來生成HTML。注意，這里的weatherData.city和weatherData.weather分別是JSON數據中的字段名。 通過這樣的方式，當用戶點擊按鈕時，頁面將發送一個Ajax請求到指定的URL，獲取返回的JSON數據，并將其解析并顯示在頁面上。這樣用戶就能方便地獲取到城市的天氣信息，而無需刷新整個頁面。 需要注意的是，在實際使用中，我們需要根據具體的需求和后臺接口的設計，調整Ajax請求的方式和數據的處理方式。此外，為了更好地處理錯誤情況，我們還可以添加錯誤處理的代碼，例如在請求失敗時顯示錯誤信息等。 綜上所述，使用Ajax獲取JSON數據并將其展示在頁面上是一種非常常見且有效的技術。它可以提升用戶體驗，減少網絡傳輸量，并且具有較好的性能表現。通過合理地利用Ajax技術，我們可以為用戶提供更加豐富和便捷的前端交互體驗。