AJAX（Asynchronous JavaScript and XML）是一種可以實現異步數據交互的技術，它可以在不刷新整個頁面的情況下，通過發送HTTP請求來獲取服務器返回的數據。而JSON（JavaScript Object Notation）是一種輕量級的數據交換格式，常用于前后端之間的數據傳遞。當使用AJAX獲取數據時，一種常見的方式是服務器將數據以JSON的格式返回給前端，這種返回JSON數據格式的交互方式可以使數據傳輸更迅速、更有效。本文將探討使用AJAX獲取JSON格式的數據，并示范一些常見的應用場景。

當使用AJAX獲取JSON數據時，可以在前端使用JavaScript解析這些數據，并將其應用于網頁中。以下是一個獲取城市天氣的例子，前端頁面有一個按鈕，點擊按鈕將會觸發AJAX請求，請求返回的數據是關于城市天氣的JSON數據。

<button onclick="getWeather()">獲取天氣</button>
<script>
function getWeather() {
var xhr = new XMLHttpRequest();
xhr.open('GET', 'weather.php', true);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
var weatherData = JSON.parse(xhr.responseText);
displayWeather(weatherData);
}
};
xhr.send();
}
function displayWeather(weatherData) {
var city = weatherData.city;
var temperature = weatherData.temperature;
var description = weatherData.description;
var weatherElement = document.getElementById('weather');
weatherElement.innerHTML = '城市：' + city + '，氣溫：' + temperature + '，描述：' + description;
}
</script>

在上面的代碼中，當按鈕被點擊時，會執行getWeather函數。該函數創建一個XMLHttpRequest對象，然后使用open方法打開一個GET類型的請求，請求的URL是weather.php。當請求的狀態發生變化時（readyState）且狀態碼在200-299之間（status），表示請求成功，可以獲取到服務器返回的數據。接著使用JSON.parse方法解析服務器返回的數據，并調用displayWeather函數將數據顯示在網頁上。

當服務器返回的JSON數據很龐大時，可以只獲取其中需要的部分數據，從而減少數據傳輸的大小。例如，如果一個網頁需要顯示一部分商品信息，可以使用AJAX獲取一個包含所有商品信息的JSON文件，然后在前端根據需要提取出特定的商品數據進行展示。

<script>
function getProducts() {
var xhr = new XMLHttpRequest();
xhr.open('GET', 'products.php', true);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
var productsData = JSON.parse(xhr.responseText);
displayProducts(productsData);
}
};
xhr.send();
}
function displayProducts(productsData) {
var productElement = document.getElementById('products');
for (var i = 0; i < productsData.length; i++) {
var product = productsData[i];
var name = product.name;
var price = product.price;
var description = product.description;
var productDiv = document.createElement('div');
productDiv.innerHTML = '名稱：' + name + '，價格：' + price + '，描述：' + description;
productElement.appendChild(productDiv);
}
}
</script>

上述代碼中，getProducts函數發送AJAX請求到products.php，獲取包含所有商品信息的JSON數據。然后，使用displayProducts函數逐個提取商品信息，并創建一個div元素來展示商品的名稱、價格和描述，并將該div元素添加到id為products的元素中。

通過使用AJAX獲取JSON數據并將其應用于網頁上，我們可以實現更加靈活和高效的數據交互。無論是獲取天氣信息、商品信息，還是處理其他需要實時獲取數據的場景，AJAX和返回JSON數據格式是非常有用的工具。通過合理使用這些工具，我們可以提升用戶體驗，并實現更好的功能和效果。