AJAX（Asynchronous JavaScript and XML）是一種在不刷新整個頁面的情況下，通過后臺數據的異步加載和前端數據的動態更新，實現在頁面上進行實時交互的技術。在Web開發中，常常使用AJAX來向服務器請求JSON數據。JSON（JavaScript Object Notation）是一種輕量級的數據傳輸格式，可以將復雜的數據結構編碼為字符串，并易于解析和生成。AJAX請求JSON數據的過程相當簡單，只需使用合適的URL和請求方法，服務器將返回JSON格式的數據，前端可以通過JavaScript將JSON數據解析并用于頁面更新。

舉個例子來說明，假設我們需要顯示一個城市天氣預報的應用程序。我們可以通過AJAX請求一個提供天氣數據的API，將返回的JSON數據解析并將城市名、當前溫度和天氣狀況在頁面上顯示出來。

// AJAX請求天氣數據
var xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.weatherapi.com/v1/current.json?key=YOUR_API_KEY&q=CityName", true);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
var cityName = response.location.name;
var temperature = response.current.temp_c;
var weatherStatus = response.current.condition.text;
// 更新頁面內容
var cityElement = document.getElementById("city");
var temperatureElement = document.getElementById("temperature");
var weatherElement = document.getElementById("weather");
cityElement.innerText = "城市： " + cityName;
temperatureElement.innerText = "溫度： " + temperature + "°C";
weatherElement.innerText = "天氣狀況： " + weatherStatus;
}
};
xhr.send();

在上面的例子中，我們使用AJAX技術發送GET請求，傳遞URL和查詢參數（API密鑰和城市名）來請求天氣數據。服務器將返回一個包含天氣信息的JSON對象。通過使用xhr.onreadystatechange方法，我們可以在AJAX請求的不同階段監聽服務器的響應。當xhr.readyState等于4且xhr.status等于200時，說明服務器的響應成功，我們可以將返回的JSON數據進行解析，并將其中的城市名、當前溫度和天氣狀況賦值給相應的HTML元素。

舉個更復雜的例子，現在我們希望在頁面上顯示一張圖片，并在用戶點擊圖片時使用AJAX請求JSON數據來獲取該圖片的詳細信息。我們可以通過給圖片元素添加事件監聽器，點擊圖片時執行AJAX請求。

// 添加點擊事件監聽器
var imageElement = document.getElementById("image");
imageElement.addEventListener("click", function () {
// AJAX請求圖片詳細信息數據
var xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.example.com/image/details.json?id=12345", true);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
var imageTitle = response.title;
var imageDescription = response.description;
// 更新頁面內容
var titleElement = document.getElementById("title");
var descriptionElement = document.getElementById("description");
titleElement.innerText = "標題： " + imageTitle;
descriptionElement.innerText = "描述： " + imageDescription;
}
};
xhr.send();
});

在上述例子中，我們通過給圖片元素添加click事件監聽器來實現點擊事件。當用戶點擊圖片時，AJAX請求將發送到服務器，查詢參數中的id指定了要請求的圖片。服務器將返回一個JSON對象，其中包含圖片的標題和描述信息。我們可以將返回的JSON數據進行解析，并將標題和描述信息更新到相應的HTML元素上。

以上只是AJAX請求JSON數據的兩個簡單示例。通過AJAX和JSON的組合，我們可以實現更復雜的用戶交互和數據動態更新，為Web應用程序帶來更好的用戶體驗和功能擴展性。