javascript AJAX是什么_如何发起网络请求

夢幻星辰 2026-01-08 00:00:00 次阅读

AJAX 是用 JavaScript 不刷新页面与服务器交换数据的做法，非函数或库；现代项目首选 fetch()，老系统才用 XMLHttpRequest。

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。

立即学习“Java免费学习笔记（深入）”；

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

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