js实现局部刷新
使用AJAX实现局部刷新
通过XMLHttpRequest对象或Fetch API异步请求数据，动态更新DOM元素内容。以下是两种常见方法：
XMLHttpRequest方式：
const xhr = new XMLHttpRequest();
xhr.open('GET', 'data-endpoint', true);
xhr.onload = function() {
if (xhr.status === 200) {
document.getElementById('target-element').innerHTML = xhr.responseText;
}
};
xhr.send();Fetch API方式（现代推荐）：
fetch('data-endpoint')
.then(response => response.text())
.then(data => {
document.getElementById('target-element').innerHTML = data;
});使用jQuery的load方法
jQuery简化了局部刷新操作，适合快速实现：
$('#target-element').load('data-endpoint #specific-content');使用Vue/React等框架
现代前端框架内置数据绑定机制，通过状态管理实现自动局部更新：
Vue示例：
new Vue({
el: '#app',
data: { content: '' },
mounted() {
fetch('data-endpoint')
.then(res => res.json())
.then(data => this.content = data);
}
});React示例：
function Component() {
const [data, setData] = useState('');
useEffect(() => {
fetch('data-endpoint')
.then(res => res.json())
.then(data => setData(data));
}, []);
return <div>{data}</div>;
}使用WebSocket实时更新
对于需要实时刷新的场景：
const socket = new WebSocket('ws://server-endpoint');
socket.onmessage = function(event) {
document.getElementById('target-element').innerHTML = event.data;
};注意事项
- 处理网络错误和加载状态
- 考虑浏览器兼容性（如IE对Fetch的支持）
- 防止XSS攻击，对动态内容进行转义
- 合理使用缓存策略提升性能
