AJAX是一种通过JavaScript在不刷新页面前提下与服务器交换数据的技术模式；fetch是现代推荐实现方式，但默认不带Cookie、不自动处理4xx/5xx状态码，需手动检查response.ok、显式解析响应体并配置credentials等。
JavaScript 中的 AJAX 不是某个具体函数，而是一种通过 JavaScript 在不刷新页面的前提下与服务器交换数据的技术模式；fetch 是现代浏览器中实现这种模式的推荐方式，但它默认不带 Cookie、不自动处理 4xx/5xx 状态码，直接用容易出错。
什么是 AJAX？别被术语绕晕
AJAX 全称 Asynchronous JavaScript and XML，本质就是「用 JS 发 HTTP 请求 + 解析响应」。XML 早已不是重点，现在传 JSON 才是主流。关键在于：请求发出去后，页面不用跳转，JS 可以接着处理返回的数据。
过去靠 XMLHttpRequest 手写，现在更常用 fetch —— 它是原生 API、基于 Promise、语法更简洁，但行为更“严格”。
fetch 基础用法和必须注意的坑
fetch 默认只管发请求、收响应，不管状态是否成功。比如服务器返回 404 或 500，fetch 依然会进入 .then()，而不是 .catch()。
立即学习“Java免费学习笔记（深入）”；
- 必须手动检查
response.ok（即status在 200–299 范围内） - 必须显式调用
response.json()或response.text()才能读取响应体，且只能调用一次 - 默认不发送 Cookie，需加
{ credentials: 'include' }才能携带认证信息 - 没有超时控制，需自己用
AbortController实现
简单 GET 示例：
fetch('/api/user')
.then(response => {
if (!response.ok) throw new Error(`HTTP ${response.status}`);
return response.json();
})
.then(data => console.log(data))
.catch(err => console.error('请求失败:', err));
POST 请求怎么传 JSON 数据？
发 JSON 到后端，核心就三点：设对 Content-Type、把 JS 对象转成字符串、用 body 字段传出去。
-
headers必须包含{ 'Content-Type': 'application/json' } -
body必须是字符串，所以得用JSON.stringify() - 如果接口需要登录态，别忘了加
credentials: 'include'
示例：
fetch('/api/login', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
credentials: 'include',
body: JSON.stringify({ username: 'admin', password: '123' })
})
.then(r => r.json())
.then(console.log);
为什么有时 fetch 看似没反应？常见静默失败点
很多“没反应”其实是请求发出去了但 JS 没处理响应体，或者跨域被拦在预检阶段。
- 忘记调用
response.json()或response.text()→ 后续.then()收不到数据 - 后端返回非 JSON（比如 HTML 错误页），却强行
.json()→ 抛 SyntaxError - 本地开发时用
file://协议打开 HTML → 浏览器禁止fetch，报Failed to fetch - CORS 配置漏了
Access-Control-Allow-Origin或预检失败 → 控制台显示 CORS 错误，但catch捕不到
调试建议：先在浏览器 Network 面板确认请求是否发出、状态码是否正常、Response 是否有内容，再看 JS 是否正确解析。
真正麻烦的不是怎么写 fetch，而是它太“干净”——没默认重试、没统一错误格式、没 loading 状态管理。业务项目里往往要自己包一层，补上超时、鉴权、错误分类、取消能力这些现实需要的东西。
