html5实现局部刷新的核心思路是通过AJAX技术在不重新加载整个页面的情况下，向服务器发送请求获取数据，再将获取到的数据更新到页面的指定区域。这种方式可以减少不必要的页面重载，提升用户操作的流畅度。
一、使用XMLHttpRequest实现局部刷新
XMLHttpRequest是传统的AJAX实现方式，兼容性较好，几乎所有现代浏览器都支持。下面通过一个获取用户列表的例子来演示具体实现。
1. 基础实现代码
// 获取页面中用于展示用户列表的容器
const userListContainer = document.getElementById('user-list');
// 创建XMLHttpRequest实例
const xhr = new XMLHttpRequest();
// 配置请求方法和请求地址，这里使用ipipp.com作为示例域名
xhr.open('GET', 'https://ipipp.com/api/users?page=1');
// 设置请求完成的回调函数
xhr.onload = function() {
if (xhr.status >= 200 && xhr.status < 300) {
// 解析服务器返回的JSON数据
const userData = JSON.parse(xhr.responseText);
// 拼接用户列表的HTML内容
let html = '<ul>';
userData.forEach(user => {
html += `<li>${user.name} - ${user.email}</li>`;
});
html += '</ul>';
// 将拼接好的内容更新到指定容器，实现局部刷新
userListContainer.innerHTML = html;
} else {
userListContainer.innerHTML = '<p>获取用户列表失败，请稍后重试</p>';
}
};
// 设置请求错误的回调函数
xhr.onerror = function() {
userListContainer.innerHTML = '<p>网络请求出错，请检查网络连接</p>';
};
// 发送请求
xhr.send();
2. 实用技巧
- 可以在发送请求前给容器添加加载提示，比如
userListContainer.innerHTML = '<p>加载中...</p>'，提升用户体验。 - 如果需要发送POST请求，可以通过
xhr.setRequestHeader设置请求头，再用xhr.send传递请求参数。 - 可以通过
xhr.timeout设置请求超时时间，搭配xhr.ontimeout处理超时场景。
二、使用fetch API实现局部刷新
fetch是html5新增的原生网络请求API，基于Promise设计，语法更简洁，是目前更推荐的使用方式。
1. 基础实现代码
// 获取页面中用于展示文章列表的容器
const articleContainer = document.getElementById('article-list');
// 添加加载提示
articleContainer.innerHTML = '<p>加载中...</p>';
// 调用fetch发送GET请求
fetch('https://ipipp.com/api/articles?limit=5')
.then(response => {
// 检查响应状态是否正常
if (!response.ok) {
throw new Error('请求失败，状态码：' + response.status);
}
// 解析响应为JSON格式
return response.json();
})
.then(articleData => {
// 拼接文章列表的HTML内容
let html = '<ul>';
articleData.forEach(article => {
html += `<li><strong>${article.title}</strong> - ${article.createTime}</li>`;
});
html += '</ul>';
// 更新容器内容，实现局部刷新
articleContainer.innerHTML = html;
})
.catch(error => {
// 捕获请求过程中的错误
articleContainer.innerHTML = `<p>获取文章列表失败：${error.message}</p>`;
});
2. 实用技巧
- fetch默认不会携带Cookie，如果需要携带，需要添加
credentials: 'include'配置项。 - 发送POST请求时，可以在第二个参数中配置method、headers、body等属性，比如传递JSON格式的参数。
- 可以搭配
async/await语法让代码更简洁，避免Promise链式调用的嵌套问题。
三、两种方式的对比
下面是XMLHttpRequest和fetch的核心差异对比：
| 对比项 | XMLHttpRequest | fetch |
|---|---|---|
| 语法风格 | 基于事件回调 | 基于Promise |
| 兼容性 | 兼容性更好，支持旧版浏览器 | 不支持IE浏览器，现代浏览器支持良好 |
| 错误处理 | 需要手动判断状态码 | 网络错误才会进入catch，HTTP错误状态码不会 |
| 使用复杂度 | 代码相对繁琐 | 代码更简洁易读 |
四、开发注意事项
- 更新页面内容时要注意防范XSS攻击，如果返回的数据包含用户输入的内容，需要进行转义处理。
- 局部刷新的区域如果包含事件绑定的元素，直接更新innerHTML会导致原有事件失效，建议使用事件委托或者更新后重新绑定事件。
- 如果页面有多个区域需要局部刷新，建议封装统一的请求函数，减少重复代码。
html5局部刷新AJAXXMLHttpRequestfetch修改时间：2026-07-16 00:33:34