在开发网页应用中，经常会遇到需要通过AJAX加载数据的情况。而当数据加载完毕后，我们通常希望能够执行一些相应的操作或函数。本文将介绍如何使用AJAX加载完成后执行函数，并通过举例来说明。

在AJAX中，可以通过设置回调函数来实现当数据加载完成后执行特定的代码。回调函数是在AJAX请求完成后由浏览器调用的函数，可以用来处理返回的数据。以下是一个简单的示例：

<script>
function loadData() {
// 创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
// 监听AJAX请求状态改变的事件
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
// 加载成功，执行回调函数
handleData(xhr.responseText);
} else {
// 请求失败，显示错误信息
console.error('请求失败');
}
}
};
// 发送AJAX请求
xhr.open('GET', 'data.json', true);
xhr.send();
}
function handleData(data) {
// 处理返回的数据
console.log(data);
}
// 调用loadData函数
loadData();
</script>

上述代码通过XMLHttpRequest对象发起了一个GET请求，并在请求状态改变时判断是否成功加载数据，若成功则调用handleData函数处理返回的数据。这里可以替换为任何您想要执行的函数，根据实际需求进行操作。

另一个常见的场景是在数据加载期间显示加载动画，以提高用户体验。以下是一个示例：

<script>
function loadData() {
// 创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
// 显示加载动画
showLoadingAnimation();
// 监听AJAX请求状态改变的事件
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
// 隐藏加载动画
hideLoadingAnimation();
if (xhr.status === 200) {
// 加载成功，执行回调函数
handleData(xhr.responseText);
} else {
// 请求失败，显示错误信息
console.error('请求失败');
}
}
};
// 发送AJAX请求
xhr.open('GET', 'data.json', true);
xhr.send();
}
function showLoadingAnimation() {
// 显示加载动画的代码
console.log('显示加载动画');
}
function hideLoadingAnimation() {
// 隐藏加载动画的代码
console.log('隐藏加载动画');
}
function handleData(data) {
// 处理返回的数据
console.log(data);
}
// 调用loadData函数
loadData();
</script>

在这个示例中，我们通过showLoadingAnimation函数显示加载动画，在数据加载完成后通过hideLoadingAnimation函数隐藏加载动画。这样用户就可以清楚地知道数据正在加载中，提高了用户体验。

通过以上示例，我们可以看到如何利用AJAX加载完成后执行函数。无论是处理返回的数据还是显示加载动画，我们都可以根据实际需求来执行相应的操作。通过合理地使用AJAX和回调函数，我们可以实现更加灵活和高效的网页应用。