JavaScript 无刷新局部更新需用 Fetch API 获取数据并操作 DOM，配合事件委托处理动态元素交互，辅以加载状态控制、请求取消及 XSS 防护等措施确保健壮性。
用 JavaScript 实现页面无刷新局部内容更新，核心是通过 AJAX（或现代的 Fetch API）获取新数据，再用 DOM 操作替换页面中指定区域的内容，不触发整个页面 reload。
用 Fetch API 加载新内容并更新 DOM
这是目前最常用、语法简洁的方式。关键步骤：发起请求 → 解析响应 → 找到目标元素 → 替换其 innerHTML 或 textContent。
- 确保后端提供结构清晰的数据接口（如返回 HTML 片段或 JSON）
- 用
fetch('/api/news')请求数据；若返回 HTML 字符串，可直接赋给element.innerHTML - 若返回 JSON，需先拼接 HTML 字符串或用模板字符串生成内容，再更新
- 记得加错误处理，比如
catch()捕获网络失败，并提示用户
用事件委托绑定动态内容的交互
局部更新后，新插入的按钮、链接等元素不会自动拥有原有事件监听器。不能对每个新元素重复 addEventListener，而应使用事件委托。
- 把事件监听器绑定在父容器（如
document.getElementById('list')）上 - 利用
event.target判断点击的是不是目标子元素（例如：if (e.target.matches('.delete-btn'))） - 这样即使后续用 JS 插入了新的
.delete-btn，点击依然有效
避免重复请求和状态混乱的小技巧
局部更新容易因用户频繁操作导致请求堆积或界面状态错乱，需简单控制。
立即学习“Java免费学习笔记（深入）”；
- 发起请求前设一个标志位（如
isLoading = true），请求结束再置为false；期间禁用按钮或显示 loading 提示 - 用
AbortController主动取消上一次未完成的请求，防止旧响应覆盖新请求的结果 - 更新 DOM 前校验当前页面是否仍是该上下文（比如用户已跳转），避免“更新到错误页面”
服务端返回 HTML 片段时的注意事项
有些场景后端直接渲染好一段 HTML（如新闻列表项），前端只负责“贴上去”，开发快但要注意安全与兼容性。
- 确保服务端输出的 HTML 是可信的，否则
innerHTML可能引发 XSS；必要时用textContent或手动解析标签 - 新插入的 HTML 中如果有
<script></script>标签，innerHTML不会执行它；如需运行，得用eval（不推荐）或提取 script 内容动态创建 script 标签 - CSS 样式需全局存在，或随 HTML 一起注入
<style></style>（注意重复注入问题）
