Ajax（Asynchronous JavaScript and XML）是一种用于在Web应用程序中进行异步数据交换的技术。它可以在浏览器和服务器之间实现数据的异步传输，从而提高用户的交互体验。在使用Ajax时，我们经常会遇到需要在Ajax执行完毕后再运行其他函数的情况。本文将探讨如何在Ajax执行完毕后运行函数，并通过举例说明其应用。

通常情况下，Ajax请求会发送给服务器并等待服务器处理完成后返回结果。在这期间，浏览器并不会阻塞用户的操作，用户可以继续与页面进行交互。但是，如果我们希望在Ajax执行完毕后再执行某些特定操作，就需要使用回调函数。

回调函数是一个在异步操作完成后被调用的函数。在Ajax中，我们可以将需要在Ajax执行完毕后执行的函数作为回调函数传入Ajax请求的参数中。

<script>
function ajaxRequest(url, callback) {
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.onreadystatechange = function() {
if(xhr.readyState === 4 && xhr.status === 200) {
callback(xhr.responseText);
}
};
xhr.send();
}
function handleResponse(response) {
// 在此处编写需要在Ajax执行完毕后执行的代码
}
ajaxRequest('example.php', handleResponse);
</script>

在上面的代码示例中，我们定义了一个ajaxRequest函数，该函数接受一个URL和一个回调函数callback作为参数。当Ajax请求执行完毕后，在onreadystatechange事件中判断请求状态和返回状态码，如果符合条件，则调用回调函数并将服务器返回的响应作为参数传递给它。

在handleResponse函数中，我们可以编写需要在Ajax请求执行完毕后执行的代码。例如，我们可以将服务器返回的响应显示在页面上：

<script>
function handleResponse(response) {
var output = document.getElementById('output');
output.innerHTML = response;
}
</script>
<div id="output"></div>

在上面的代码示例中，我们通过使用document.getElementById方法获取一个ID为output的元素，并将服务器返回的响应赋值给它的innerHTML属性。这样，当Ajax请求执行完毕后，页面上的<div>元素将显示服务器返回的响应。

除了在Ajax执行完毕后执行某些操作外，我们还可以使用jQuery库提供的$.ajax方法来处理Ajax请求的回调函数。jQuery的$.ajax方法非常强大且易于使用，可以简化Ajax请求的编写过程。

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$.ajax({
url: 'example.php',
success: function(response) {
// 在此处编写需要在Ajax执行完毕后执行的代码
}
});
</script>

在上面的代码示例中，我们使用了jQuery库的$.ajax方法来发送Ajax请求。通过指定url和success参数，我们可以定义在Ajax执行完毕后执行的回调函数。

通过回调函数，我们可以在Ajax执行完毕后自由地执行其他操作，从而实现更加灵活和高效的前端开发。无论是使用原生JavaScript还是jQuery库，掌握并善用回调函数对于处理Ajax请求是非常重要的。