AJAX（Asynchronous JavaScript and XML）是一種用于創建交互式和動態網頁的技術，它可以在不刷新整個頁面的情況下與服務器進行通信。JSON（JavaScript Object Notation）是一種輕量級的數據交換格式，它常用于數據傳輸和存儲。結合AJAX和JSON，可以實現網頁上對服務器數據的實時請求和響應。本文將介紹AJAX和JSON的基本概念，并通過舉例說明如何使用它們創建交互式的網頁應用。

在網頁開發中，我們經常需要從服務器獲取數據，然后將數據顯示在網頁上。以一個天氣預報應用為例，我們需要從服務器獲取實時的天氣數據，并將其顯示在網頁上。傳統的做法是，當用戶打開網頁時，需要刷新整個頁面來獲取最新的數據。然而，這種方式給用戶帶來了不好的用戶體驗，因為頁面刷新會中斷用戶的操作和瀏覽過程。由于AJAX技術的出現，我們可以在不刷新頁面的情況下獲取最新的天氣數據，并將其實時更新在網頁上。

AJAX通過使用XMLHttpRequest對象與服務器進行通信。我們可以使用JavaScript創建一個XMLHttpRequest對象，并設置其屬性和方法來發送請求和接收響應。下面是一個使用AJAX和JSON從服務器獲取天氣數據的示例：

function getWeatherData() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var weatherData = JSON.parse(xhr.responseText);
displayWeatherData(weatherData);
}
};
xhr.open("GET", "weather.php", true);
xhr.send();
}
function displayWeatherData(weatherData) {
var temperature = weatherData.temperature;
var humidity = weatherData.humidity;
var description = weatherData.description;
document.getElementById("temperature").innerHTML = "Temperature: " + temperature;
document.getElementById("humidity").innerHTML = "Humidity: " + humidity;
document.getElementById("description").innerHTML = "Description: " + description;
}
getWeatherData();

在上面的代碼中，我們使用XMLHttpRequest對象創建了一個AJAX請求，然后通過open方法指定了請求的類型（GET）和URL（weather.php）。接下來，我們使用send方法發送請求。當服務器響應完成時，我們通過onreadystatechange事件處理程序來處理響應。當readyState等于4（完成）并且status等于200（請求成功）時，我們通過JSON.parse方法解析服務器返回的JSON數據，并調用displayWeatherData函數來在網頁上顯示數據。

為了更好地理解，我們假設服務器返回的JSON數據如下：

{
"temperature": 25,
"humidity": 80,
"description": "Sunny"
}

在displayWeatherData函數中，我們從weatherData對象中獲取溫度、濕度和描述信息，并使用innerHTML屬性將它們顯示在網頁上。

通過AJAX和JSON，我們可以輕松實現網頁上對服務器數據的實時請求和響應。例如，當用戶點擊一個按鈕時，我們可以使用AJAX發送一個請求到服務器，并將服務器返回的數據更新到網頁上，而不需要刷新整個頁面。這種實時更新數據的方式可以大大提高用戶體驗，并且可以減少服務器負載。