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发送一个请求到服务器，并将服务器返回的数据更新到网页上，而不需要刷新整个页面。这种实时更新数据的方式可以大大提高用户体验，并且可以减少服务器负载。