如何用Javascript实现动态内容加载与Ajax请求？_技术教程

现代网页动态加载应先封装请求逻辑、再绑定DOM更新、最后由事件或路由触发；fetch比XMLHttpRequest更轻量但需手动处理HTTP错误、cookie、超时；动态插入HTML须防XSS，推荐DOMParser解析后挂载；loading与错误状态须严格同步请求生命周期；SEO和历史记录需配合SSR/SSG或history API。

动态内容加载和 Ajax 请求在现代网页中几乎是标配，但直接用 fetch 或 XMLHttpRequest 写一堆回调、错误处理、loading 状态管理，很容易失控。核心原则是：**先封装请求逻辑，再绑定 DOM 更新时机，最后用事件或路由触发**。

用 `fetch` 替代 `XMLHttpRequest` 是当前最简方案

原生 XMLHttpRequest 写法冗长，Promise 化麻烦，且默认不拒绝网络失败（比如 404、500 会进 then 而非 catch）。fetch 更轻量，返回 Promise，但要注意它只在网络错误时 reject，HTTP 状态码异常（如 400、500）仍走 then。

必须手动检查 response.ok 或 response.status 才能捕获业务错误
fetch 默认不带 cookie，跨域需显式加 { credentials: 'include' }
不支持超时控制，需用 AbortController 配合

const controller = new AbortController();
setTimeout(() => controller.abort(), 5000);

fetch('/api/data', {
  signal: controller.signal
})
.then(res => {
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  return res.json();
})
.catch(err => {
  if (err.name === 'AbortError') console.log('请求超时');
  else console.error('请求失败:', err);
});

动态插入 HTML 内容时，避免直接拼接字符串

用 innerHTML 插入服务端返回的 HTML 片段看似方便，但存在 XSS 风险，且无法复用已有事件监听器。更安全的做法是：解析响应为 DOM 节点后选择性挂载，或统一用数据驱动（如模板函数 + textContent）。

若后端返回的是纯 HTML 片段（如 ...），可用 DOMParser 解析再提取子节点
避免对用户输入或未校验的 API 字段直接插进 innerHTML
已存在的按钮、表单等交互元素，插入后需重新绑定事件，或改用事件委托（event.target.matches()）

const parser = new DOMParser();
const doc = parser.parseFromString(htmlString, 'text/html');
const container = document.getElementById('list');
container.innerHTML = '';
container.append(...doc.body.children); // 安全插入子节点