AJAX是浏览器原生能力组合，本质为XMLHttpRequest或fetch异步通信；“无刷新”指局部DOM更新而非整页重载；fetch推荐但需手动判response.ok、注意cookie与JSON解析；XMLHttpRequest仍适用于进度监听等场景；须防卡顿、XSS、竞态等问题。
AJAX 不是某个函数，而是浏览器原生能力的组合用法
它本质是利用 XMLHttpRequest（或现代的 fetch）在后台和服务器交换数据，不打断用户当前操作。所谓“无刷新”，是指不重载整个页面——DOM 可以局部更新，比如只替换一个 <div id="content"> 里的内容。
<h3>用 <code>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 就是同步——但强烈不建议）。
立即学习“Java免费学习笔记（深入）”；
- 必须在
onload里读xhr.responseText，不能在onreadystatechange的任意状态读 - 手动设置请求头要用
xhr.setRequestHeader()，且必须在xhr.send()之前调用 - IE 中需用
ActiveXObject("Microsoft.XMLHTTP")回退，但现代项目基本可忽略
“无刷新”不等于“没网络请求”，常见误判点
很多开发者以为用了 AJAX 就不会卡页面，其实不然：大体积 JSON 解析、频繁 DOM 操作、未取消的重复请求，都会造成卡顿或内存泄漏。
- 连续点击按钮多次，可能发出去 5 个并发请求，但只有最后一个响应有意义——要用
AbortController主动取消旧请求 - 服务端返回 HTML 片段（而非 JSON）时，直接
innerHTML = htmlString可能执行其中的<script></script>，有 XSS 风险；应使用textContent或严格过滤 - SPA 中用 AJAX 加载内容后，记得用
history.pushState()更新 URL，否则刷新页面会丢失状态
真正难的不是发请求，而是让每次更新都稳、快、可预测——尤其是错误边界和竞态处理。
