AJAX是一种通过XMLHttpRequest或fetch实现页面局部更新的通信模式，核心是不刷新页面交换数据；fetch为现代推荐方案，需注意手动处理错误、设置headers和credentials；XMLHttpRequest仅兼容旧IE时使用。
JavaScript AJAX 是什么？它不是某个函数，而是一种通信模式
AJAX（Asynchronous JavaScript and XML）本质是浏览器通过 XMLHttpRequest 或 fetch 在不重新加载页面的前提下，与服务器交换数据并更新局部内容的技术。名字里的 “XML” 已成历史包袱——现在传 JSON 更常见，但术语保留了下来。
关键不在“异步”，而在“局部更新”：点击按钮后只改页面某一块区域，URL 不跳转，历史记录不新增，用户体验更接近原生 App。
用 fetch 发起最简无刷新请求（推荐现代写法）
fetch 是当前标准，比 XMLHttpRequest 更简洁、更符合 Promise 语义。但它默认不带 cookie，且 4xx/5xx 状态码不会触发 catch，这点极易踩坑。
- 必须手动检查
response.ok或response.status才能捕获业务错误 - 发送 JSON 数据时，记得设
Content-Type: application/json - 需要携带登录态？加
credentials: 'include'
fetch('/api/user', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
credentials: 'include',
body: JSON.stringify({ id: 123 })
})
.then(response => {
if (!response.ok) throw new Error(`HTTP error ${response.status}`);
return response.json();
})
.then(data => console.log(data))
.catch(err => console.error('请求失败:', err));
XMLHttpRequest 还值得学吗？只在需兼容 IE9 及以下时才用
除非维护老项目，否则不必主动写 XMLHttpRequest。它的回调嵌套深、API 冗长，比如监听进度、手动处理状态码、区分 onload 和 onerror 都要额外处理。
立即学习“Java免费学习笔记（深入）”；
典型易错点：
-
readyState === 4不代表成功，还得看status === 200 -
responseText是字符串，解析 JSON 前必须确认非空且合法 - 设置请求头要在
open()之后、send()之前
如果真要用，优先封装成 Promise，别裸写回调链。
为什么点了按钮没反应？常见拦截点和调试路径
无刷新请求失败，80% 情况不是代码逻辑错，而是被环境或配置拦下了：
- CORS 报错？看浏览器控制台 Network 标签页里预检请求（
OPTIONS）是否 403/405 —— 后端没配Access-Control-Allow-Origin或允许方法 - 请求发出去了但没进后端？检查 URL 路径是否漏了前缀（如
/api/v1/user写成/user），或代理配置（vite.config.js的proxy、webpackDevServer）没生效 - 返回数据对不上？确认后端响应头含
Content-Type: application/json，否则response.json()会抛错 - 本地开发正常，部署后失败？大概率是相对路径变绝对路径导致跨域，或 Nginx 没透传
Origin头
调试时直接在控制台粘贴 fetch 语句跑一遍，比反复点按钮更快定位是前端逻辑问题还是网络链路问题。
