实现HTML5局部刷新的五种常用技巧：一、XMLHttpRequest；二、fetch API；三、jQuery load()；四、FormData+XMLHttpRequest表单提交；五、history.pushState维持URL一致性。
如果您希望在不重新加载整个页面的情况下更新网页的某一部分内容，则可能是由于需要提升用户体验或减少服务器负载。以下是实现 HTML5 局部刷新的几种常用技巧：
一、使用原生 XMLHttpRequest 对象
XMLHttpRequest 是浏览器内置的用于发起 HTTP 请求的对象，可直接与服务器通信并获取响应数据，从而实现指定区域的内容替换。
1、创建 XMLHttpRequest 实例：const xhr = new XMLHttpRequest();
2、配置请求方式与 URL：xhr.open('GET', '/api/data', true);
立即学习“前端免费学习笔记（深入）”；
3、设置响应类型为 text 或 json：xhr.responseType = 'text';
4、定义 onload 回调函数，在其中获取响应并更新 DOM：xhr.onload = () => { document.getElementById('target').innerHTML = xhr.responseText; };
5、发送请求：xhr.send();
二、使用 fetch API
fetch 是现代浏览器提供的基于 Promise 的网络请求接口，语法简洁，支持 async/await，适合处理结构化数据交互。
1、调用 fetch 函数并传入资源路径：fetch('/api/content')
2、使用 then 链式调用处理响应：.then(response => response.text())
3、将返回文本插入目标容器：.then(data => document.getElementById('content-area').innerHTML = data);
4、添加 catch 捕获网络异常：.catch(err => console.error('请求失败:', err));
三、使用 jQuery 的 load() 方法
jQuery 提供了封装良好的 load() 方法，可直接将远程 HTML 片段载入匹配元素中，适用于快速替换静态内容区块。
1、确保已引入 jQuery 库：
2、选择目标容器并调用 load：$('#sidebar').load('/partial/sidebar.html');
3、可在回调函数中执行后续操作：$('#header').load('/header.html', function() { console.log('头部已更新'); });
四、通过 FormData 与 XMLHttpRequest 实现表单局部提交
当用户提交表单时，若仅需更新结果区域而不跳转页面，可借助 FormData 收集表单字段，并用 XMLHttpRequest 发送 POST 请求。
1、获取表单 DOM 元素：const form = document.getElementById('search-form');
2、阻止默认提交行为：form.addEventListener('submit', e => e.preventDefault());
3、构造 FormData 对象：const formData = new FormData(form);
4、使用 xhr 发送 POST 请求：xhr.open('POST', '/search', true); xhr.send(formData);
5、在 onload 中解析 JSON 响应并渲染结果列表：xhr.onload = () => { const result = JSON.parse(xhr.responseText); document.getElementById('results').innerHTML = result.html; };
五、利用 history.pushState 配合局部刷新维持 URL 一致性
在局部刷新后保持地址栏 URL 同步，有助于用户前进/后退及书签收藏，pushState 可在不触发页面重载的前提下修改历史记录和当前 URL。
1、监听导航链接点击事件：document.querySelectorAll('nav a').forEach(a => a.addEventListener('click', handleNav));
2、在事件处理器中发起 AJAX 请求并更新内容：function handleNav(e) { e.preventDefault(); const url = e.target.href; fetch(url).then(r => r.text()).then(html => { document.getElementById('main').innerHTML = html; }); }
3、调用 pushState 更新浏览器地址栏：history.pushState({ path: url }, '', url);
4、监听 popstate 事件以响应浏览器前进/后退操作：window.addEventListener('popstate', () => { /* 重新加载对应内容 */ });
