AJAX是什么？JS如何发起请求

AJAX本质上是JavaScript在不刷新页面的情况下与服务器交换数据的通用做法，而非某个具体函数或库；现代开发中应优先使用简洁强大的fetch() API——它基于Promise、支持async/await，但需注意默认不携带cookie、HTTP错误状态不会自动reject、响应体需手动解析等关键细节；而XMLHttpRequest仅适用于需要上传进度监听、请求取消或IE兼容等特殊场景，日常开发中已非首选。掌握这些核心差异与实践要点，就能高效、可靠地实现前后端异步通信。

JavaScript 中的 AJAX 就是 fetch() 或 XMLHttpRequest

AJAX 不是某个函数，也不是一个库，它只是“用 JavaScript 在不刷新页面的前提下和服务器交换数据”的一种做法。现代项目里，fetch() 是首选；老系统或需兼容 IE 的场景才用 XMLHttpRequest。别被缩写吓住——它没那么神秘，本质就是发 HTTP 请求。

用 fetch() 发 GET 请求最简单

90% 的基础请求靠它就够了。注意它默认不带 cookie，且返回的是 Promise，必须用 .then() 或 await 处理响应。

• 不加 credentials: 'include' 时，跨域请求不会发送 Cookie
• fetch() 只在网络失败（如断网、DNS 错误）时 reject，HTTP 状态码 404/500 不会触发 catch
• 响应体要用 response.json()、response.text() 等方法读取，不能直接访问 response.body

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 请求要手动设置 Content-Type 和 body

发 JSON 数据时，必须显式加 headers，且 body 要是字符串（不是对象）。漏掉 JSON.stringify() 是高频错误。

• 表单提交用 FormData，不用设 Content-Type（浏览器自动加 boundary）
• 上传文件必须用 FormData，不能用 JSON.stringify()
• method: 'POST' 必须显式声明，fetch() 默认是 GET

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

XMLHttpRequest 现在只用于特殊需求

比如需要监听上传进度、取消请求（靠 abort()）、或兼容 IE11。它的回调机制更底层，写法冗长，出错时容易忘记检查 readyState 和 status。

• 必须手动调用 xhr.open() 和 xhr.send()
• xhr.onload 只在状态码 200–299 触发，4xx/5xx 会进 xhr.onerror（但网络错误也进这里，需结合 xhr.status === 0 判断）
• 想拿响应头必须等 xhr.readyState === 4 后调用 xhr.getResponseHeader()

除非你明确需要它提供的细粒度控制，否则没必要主动选它。

今天关于《AJAX是什么？JS如何发起请求》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！