17370845950

Ajax是异步加载数据的概念，非具体API；现代开发首选fetch，需手动检查response.ok、设置credentials、处理超时与JSON解析；XMLHttpRequest仅兼容老IE时使用；跨域预检请求需前后端协同配置。

JavaScript 发送请求不是靠“Ajax”这个东西本身，而是靠 XMLHttpRequest 或 fetch 这类底层 API；“Ajax”只是个概念——异步加载数据，不刷新页面。现在写法早就不依赖 XMLHttpRequest 手动封装了。

用 fetch 发请求最常用，但要注意它不认 HTTP 状态码错误

fetch 默认只在网络失败（如断网、DNS 失败）时 reject，404、500 这类响应仍算“成功”，response.ok 才是判断业务是否成功的可靠依据：

• 必须手动检查 response.ok 或 response.status，否则 500 响应会静默进入 then
• fetch 默认不带 cookie，要发带凭证的请求得加 { credentials: 'include' }
• 没有超时控制，需要自己用 AbortController 实现
• 不自动解析 JSON，得链式调用 .json()，且该方法也返回 Promise，要 await 两次

fetch('/api/user')
  .then(r => {
    if (!r.ok) throw new Error(`HTTP ${r.status}`);
    return r.json();
  })
  .then(data => console.log(data))
  .catch(err => console.error(err));

XMLHttpRequest 还值得学吗？只在兼容老环境时用

除非要支持 IE9 及更早版本，否则没必要手写 XMLHttpRequest。它的主要坑在于：

• 回调嵌套深，容易写出“回调地狱”
• 状态判断靠 xhr.readyState === 4 && xhr.status === 200，容易

  

  漏判
• 设置请求头必须在 .open() 之后、.send() 之前
• 上传进度监听用 xhr.upload.onprogress，下载用 xhr.onprogress，两者不同

POST 提交 JSON 数据，别忘了设 Content-Type

用 fetch 发 JSON 时，headers 必须显式声明 Content-Type: application/json，否则后端可能收不到 body 或解析失败：

fetch('/api/login', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ username: 'a', password: 'b' })
});

• 如果后端用的是 form 表单接收（如 application/x-www-form-urlencoded），就得用 new URLSearchParams({...}) 构造 body
• 传文件要用 FormData，此时不能设 Content-Type —— 浏览器会自动生成带 boundary 的 multipart 类型

跨域问题不是前端能绕开的，但预检请求可以少触发

当请求满足“非简单请求”条件（比如带自定义 header、Content-Type 不是 text/plain/multipart/form-data/application/x-www-form-urlencoded），浏览器会先发一个 OPTIONS 预检请求。避免它的办法只有：

• 后端在响应中加 Access-Control-Allow-Headers，把前端用到的 header 列全
• 前端尽量用简单请求方式：比如不用 Authorization header，改用 query 参数或 cookie 传 token
• credentials: 'include' 会让预检必发，且后端必须返回 Access-Control-Allow-Origin 具体域名，不能是 *

真正难调试的往往不是语法，而是预检被拦截后控制台只显示“CORS error”，却不告诉你到底是哪个响应头没配对。