AJAX（Asynchronous JavaScript and XML）是一種用于在后臺與服務器進行異步通信的技術，通過它我們可以在不刷新整個頁面的情況下更新部分頁面內容。在使用 AJAX 進行異步通信時，常見的數據格式是 JSON（JavaScript Object Notation）。JSON 是一種輕量級的數據交換格式，易于閱讀和編寫，也易于解析和生成。在本文中，我們將討論如何使用 AJAX 請求返回 JSON 數據，并對這些數據進行處理和顯示。

在前端開發中，常常需要向服務器請求數據，并將服務器返回的數據展示給用戶。假設我們正在開發一個簡單的天氣預報應用程序，用戶可以輸入城市名稱，然后應用程序會從服務器獲取該城市的天氣數據并顯示給用戶。這里我們將使用 AJAX 請求返回 JSON 數據來獲取天氣數據。

function getWeather(city) {
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.weatherapi.com/v1/current.json?key=YOUR_API_KEY&q=' + city, true);
xhr.onload = function() {
if (xhr.status === 200) {
var weatherData = JSON.parse(xhr.responseText);
// 處理天氣數據，并顯示給用戶
} else {
console.log('請求天氣數據失敗');
}
};
xhr.send();
}

上面的代碼通過 AJAX 請求從天氣預報 API 獲取了城市的天氣數據。我們將城市名稱作為參數傳遞給 `getWeather` 函數，并在函數內部構建了一個 GET 請求。請求的 URL 拼接了城市名稱和天氣預報 API 的密鑰。在請求成功時，我們通過 `JSON.parse` 方法將返回的 JSON 數據解析為 JavaScript 對象，然后可以對這些數據進行處理和展示。

假設我們使用上面的代碼獲取了北京的天氣數據，解析后的數據如下所示：

{
"location": {
"name": "Beijing",
"region": "Beijing",
"country": "China",
"lat": 39.92,
"lon": 116.39,
"tz_id": "Asia/Shanghai",
"localtime_epoch": 1677715263,
"localtime": "2022-03-01 21:14"
},
"current": {
"temp_c": 7,
"condition": {
"text": "Partly cloudy"
}
}
}

我們可以從這個 JSON 對象中提取出我們需要的天氣數據。例如，我們可以獲取當前溫度和天氣狀況：

var currentTemperature = weatherData.current.temp_c;
var weatherCondition = weatherData.current.condition.text;

通過使用 AJAX 請求返回的 JSON 數據，我們可以非常靈活地獲取并處理后端返回的數據，在前端頁面上進行展示。這種前后端的分離使得我們能夠實現更好的用戶體驗并提升應用程序的性能。

總結：在本文中，我們討論了如何使用 AJAX 請求返回 JSON 數據，并對這些數據進行處理和展示。通過 AJAX 獲取 JSON 數據，我們可以從后端獲取到實時的數據，并將其實時展示在前端頁面上。這種方式使得前后端的通信更加高效和靈活，提升了應用程序的用戶體驗。