使用 AJAX 实现局部刷新的步骤如下：
基本概念
AJAX（Asynchronous JavaScript and XML）允许网页在不重新加载的情况下与服务器通信，更新部分内容。实现步骤
2.1 创建 XMLHttpRequest 对象
javascript
var xhr = new XMLHttpRequest();
2.2 定义请求
javascript
xhr.open('GET', 'your-server-endpoint', true);
'GET'：请求方法（也可以是 'POST'）。
‘your-server-endpoint’：服务器 URL。
true：表示异步请求。
2.3 设置回调函数
javascript
xhr.onload = function() {
if (xhr.status >= 200 && xhr.status < 300) {
document.getElementById('your-element-id').innerHTML = xhr.responseText;
} else {
console.error('Request failed with status:', xhr.status);
}
};
xhr.status：检查请求状态。
xhr.responseText：服务器返回的数据。
document.getElementById(‘your-element-id’).innerHTML：更新指定元素内容。
2.4 发送请求
javascript
xhr.send();
- 示例代码
html
复制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AJAX Example</title>
</head>
<body>
<div id="content">
<p>Initial content</p>
</div>
<button onclick="loadNewContent()">Load New Content</button>
<script>
function loadNewContent() {
var xhr = new XMLHttpRequest();
xhr.open('GET', 'new-content.html', true);
xhr.onload = function() {
if (xhr.status >= 200 && xhr.status < 300) {
document.getElementById('content').innerHTML = xhr.responseText;
} else {
console.error('Request failed with status:', xhr.status);
}
};
xhr.send();
}
</script>
</body>
</html>
运行 HTML
4. 使用 Fetch API（现代方式）
javascript
复制
fetch('your-server-endpoint')
.then(response => response.text())
.then(data => {
document.getElementById('your-element-id').innerHTML = data;
})
.catch(error => console.error('Error:', error));
- 注意事项
跨域请求：确保服务器支持 CORS。
错误处理：添加错误处理机制。
性能优化：避免频繁请求，考虑防抖或节流。
通过这些步骤，你可以实现网页的局部刷新。