JavaScript发送请求方法及Ajax原理详解

本文深入解析了JavaScript发送网络请求的核心原理与实战要点，澄清了“Ajax”仅是异步加载数据的概念而非具体API，并重点对比了现代首选的fetch API与传统XMLHttpRequest的适用场景与关键陷阱：fetch虽简洁强大，但需手动校验response.ok、显式配置credentials、自行实现超时控制及正确处理JSON解析；而XMLHttpRequest仅在兼容老旧IE时才需考虑，其回调机制易导致维护难题。文章还详解了POST提交不同格式（JSON、表单、文件）的正确写法，以及跨域预检请求（OPTIONS）的触发条件与优化策略——强调前端无法绕过CORS限制，但可通过精简请求头、合理使用凭证和后端协同配置来减少调试盲区，真正帮开发者避开那些控制台不报错却请求失败的“静默坑”。

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”，却不告诉你到底是哪个响应头没配对。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~