用 fetch 发起 GET 请求并更新 DOM 最简流程
这是目前最推荐的方式，语法简洁、返回 Promise、天然支持 async/await。注意它默认不带 cookie，且 4xx/5xx 响应不会触发 catch（需手动检查 response.ok）。
- 确保后端接口返回的是 JSON（响应头含
Content-Type: application/json） - 用
response.json()解析响应体，不能直接当对象用 - 更新 DOM 前先确认目标元素存在，否则会报
Cannot set property 'innerHTML' of null - 错误处理别只写
catch，要加if (!response.ok)判断 HTTP 状态码
async function loadContent() {
try {
const response = await fetch('/api/news');
if (!response.ok) throw new Error(`HTTP ${response.status}`);
const data = await response.json();
const container = document.getElementById('content');
if (container) {
container.innerHTML = `<h2>${data.title}</h2><p>${data.body}</p>`;
}
} catch (err) {
console.error('加载失败：', err.message);
}
}
XMLHttpRequest 还值得学吗？
值得，尤其当你需要监听上传进度、手动控制请求头（如设置 X-Requested-With）、或兼容 IE10+ 时。fetch 不支持上传进度，也不支持同步请求（而 XMLHttpRequest 的 open(method, url, async) 第三个参数设为 false 就是同步——但强烈不建议）。
- 必须在
onload里读xhr.responseText，不能在onreadystatechange的任意状态读 - 手动设置请求头要用
xhr.setRequestHeader()，且必须在xhr.send()之前调用 - IE 中需用
ActiveXObject("Microsoft.XMLHTTP")回退，但现代项目基本可忽略
“无刷新”不等于“没网络请求”，常见误判点
很多开发者以为用了 AJAX 就不会卡页面，其实不然：大体积 JSON 解析、频繁 DOM 操作、未取消的重复请求，都会造成卡顿或内存泄漏。
- 连续点击按钮多次，可能发出去 5 个并发请求，但只有最后一个响应有意义——要用
AbortController主动取消旧请求 - 服务端返回 HTML 片段（而非 JSON）时，直接
innerHTML = htmlString可能执行其中的
