AJAX（Asynchronous JavaScript and XML）是一种用于创建快速、动态网页的技术。它允许我们在不重新加载整个页面的情况下与服务器进行通信，并更新网页上的部分内容。在使用AJAX时，回调函数起到至关重要的作用，用于在服务器响应完成后接收和处理数据。本文将详细介绍AJAX回调函数接收数据的过程，并通过举例说明其使用方法。

假设我们想要实现一个简单的天气查询应用程序，用户在页面上输入城市名称，点击查询按钮后，页面将显示该城市的实时天气信息。在这个过程中，我们需要使用AJAX来向服务器发送请求，并利用回调函数接收来自服务器的天气数据。下面是一个使用jQuery库进行AJAX通信的示例：

$.ajax({
url: "https://api.weatherapi.com/v1/current.json",
method: "GET",
data: { q: city, key: apiKey },
success: function(response) {
// 在这里处理服务器返回的数据
var temperature = response.current.temp_c;
var humidity = response.current.humidity;
$("#result").html("温度：" + temperature + "℃，湿度：" + humidity + "%");
},
error: function(xhr, status, error) {
console.log("AJAX请求出错：" + error);
}
});

在这个示例中，我们使用了jQuery的ajax函数来发送一个GET请求到指定的URL。success回调函数用于接收服务器响应成功时返回的数据，这里我们使用response参数来获取天气数据。我们从response中取出温度和湿度数据，并将其显示在页面上的#result元素中。如果AJAX请求失败，error回调函数将会被执行，将错误信息打印到控制台中。

除了使用jQuery的ajax函数，我们还可以使用原生的XMLHttpRequest对象来实现AJAX通信。下面是一个原生JavaScript的示例：

var xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.weatherapi.com/v1/current.json?q=" + city + "&key=" + apiKey, true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
var temperature = response.current.temp_c;
var humidity = response.current.humidity;
document.getElementById("result").innerHTML = "温度：" + temperature + "℃，湿度：" + humidity + "%";
} else if (xhr.readyState === 4 && xhr.status !== 200) {
console.log("AJAX请求出错：" + xhr.status);
}
};
xhr.send();

在这个示例中，我们创建了一个XMLHttpRequest对象，并使用其open方法来设置请求的URL和方法。通过onreadystatechange事件监听器，我们可以在服务器响应的状态发生变化时进行处理。当readyState等于4（即响应已经完成）并且status等于200（即请求成功）时，我们解析服务器返回的JSON响应，并获取温度和湿度数据。和之前的示例一样，我们将天气信息显示在页面上的#result元素中。如果AJAX请求失败，我们将错误状态打印到控制台中。

在这两个示例中，success和onreadystatechange回调函数都起到了接收数据并进行相应处理的作用。无论是使用jQuery还是原生JavaScript，我们都可以通过这些回调函数来获取来自服务器的数据，并在页面上进行相应的更新和展示。

总结起来，AJAX回调函数在接收数据方面起到了至关重要的作用，能够帮助我们实现网页上的实时更新和动态内容展示。无论是通过jQuery库还是原生JavaScript，我们都可以轻松地实现AJAX通信，并在回调函数中处理来自服务器的数据。掌握AJAX回调函数的使用方法，将为我们开发更加灵活、响应更迅速的网页应用程序提供强大的支持。