Ajax回调函数是在异步请求完成后执行的函数，它允许我们在请求完成后处理返回的数据或执行其他操作。通过使用回调函数，我们可以在Ajax请求完成后更新页面的内容，使用户能够及时看到最新的数据。

举个例子来说明，假设我们有一个网页上显示最新消息的部分，当用户打开网页时会自动载入最新的消息。为了实现这个功能，我们可以使用Ajax来请求服务器上的最新消息，并在请求完成后更新网页上的内容。在这个例子中，Ajax回调函数可以指定要在请求完成后执行的代码，用于将最新的消息添加到网页中。

function loadLatestNews(callback) {
// 发起Ajax请求获取最新消息
var xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.example.com/latest-news", true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 请求完成后执行回调函数
callback(xhr.responseText);
}
};
xhr.send();
}
function updateNewsContent(newsData) {
// 将最新消息添加到网页中
document.getElementById("news-content").innerHTML = newsData;
}
// 调用loadLatestNews函数，并将updateNewsContent函数作为回调函数进行传递
loadLatestNews(updateNewsContent);

在上面的代码中，loadLatestNews是一个用于发起Ajax请求的函数，它接受一个回调函数作为参数。当请求完成后，回调函数会被传入请求返回的数据，然后我们可以在回调函数中使用这些数据来更新网页上的内容。在这个例子中，回调函数updateNewsContent负责将最新消息添加到网页的特定元素中。

除了更新页面内容外，Ajax回调函数还可以用于执行其他操作，比如验证用户输入，处理表单提交等。下面是另一个例子，演示了如何使用回调函数验证用户注册表单中的用户名是否已经被占用。

function checkUsernameAvailability(username, callback) {
// 发起Ajax请求验证用户名是否被占用
var xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.example.com/check-username?username=" + username, true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 请求完成后执行回调函数，并将结果作为参数传入
callback(xhr.responseText === "available");
}
};
xhr.send();
}
function handleUsernameAvailability(isAvailable) {
// 根据用户名是否可用执行相应操作
if (isAvailable) {
document.getElementById("username-status").innerHTML = "用户名可用";
} else {
document.getElementById("username-status").innerHTML = "用户名已被占用";
}
}
// 监听用户名输入框的变化
document.getElementById("username-input").addEventListener("input", function() {
var username = this.value;
// 调用checkUsernameAvailability函数，并将handleUsernameAvailability函数作为回调函数进行传递
checkUsernameAvailability(username, handleUsernameAvailability);
});

在这个例子中，当用户在用户名输入框中输入内容时，我们会发起Ajax请求来验证用户名是否已经被占用。checkUsernameAvailability函数接受用户名和一个回调函数作为参数，在请求完成后将结果传递给回调函数。回调函数handleUsernameAvailability根据用户名是否可用来执行相应的操作，比如更新一个状态元素的内容，告知用户用户名是否可用。

通过使用Ajax回调函数，我们可以在请求完成后执行代码，更新页面内容或执行其他操作。这种方式不仅使我们的网页能够及时获得最新的数据，也提高了用户体验，使用户能够立即看到页面的变化。