在 HTML 中使用 AJAX(Asynchronous JavaScript and XML)可以实现不刷新整个页面的情况下更新页面的一部分内容。下面是使用 AJAX 实现异步页面更新的步骤:
1. 创建 XMLHttpRequest 对象
let xhr = new XMLHttpRequest();
2. 设置请求方式和请求地址
xhr.open("GET", "example.php", true);
3. 发送请求
xhr.send();
4. 监听 XMLHttpRequest 对象的 readyState 和 status 属性
xhr.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
// 处理返回的数据
}
};
5. 处理返回的数据
let result = xhr.responseText;
document.getElementById("content").innerHTML = result;
在处理返回的数据时,一般会将返回的数据更新到页面的某个元素中。上面的例子中,我们将返回的数据更新到了 id 为 content 的元素中。
使用 AJAX 实现异步页面更新可以提升用户体验,避免页面的频繁刷新。