javascriptAJAX是什么_如何与服务器进行数据交互【教程】_网络技术

javascriptAJAX是什么_如何与服务器进行数据交互【教程】

发布时间 - 2026-01-28 00:00:00 点击率：次

AJAX 是用 JavaScript 发起 HTTP 请求、不刷新页面更新局部内容的实践方式，核心是 XMLHttpRequest 或 fetch()，关键在“异步”和“局部更新”；推荐优先使用 fetch()，因其语法简洁、基于 Promise、天然支持 async/await，而 XMLHttpRequest 需手动处理状态码、事件和响应体转换。

AJAX 不是某种新语言，而是用 JavaScript 发起 HTTP 请求、不刷新页面更新局部内容的一套实践方式。 它的核心是 XMLHttpRequest 或更现代的 fetch()，关键在于“异步”和“局部更新”——你改一个表单、点个按钮、下拉加载更多，背后都在用它。

为什么用 `fetch()` 而不是 `XMLHttpRequest`？

除非要支持 IE11 及更老浏览器，否则直接用 fetch()。它语法简洁、基于 Promise、天然支持 async/await，而 XMLHttpRequest 需手动处理状态码、监听事件、转换响应体，容易写错。

常见坑：

fetch() 默认不带 cookie，需显式加 { credentials: 'include' } 才能传登录态
fetch() 只在网络失败时 reject，HTTP 状态码 404/500 不会触发 catch，得手动检查 response.ok
POST 提交 JSON 时，必须设 headers: { 'Content-Type': 'application/json' }，否则后端可能收不到 body

`fetch()` 最简可用示例（GET 和 POST）

GET 请求（查数据）：

const res = await fetch('/api/users?id=123');
const data = await res.json();
if (!res.ok) throw new Error(`HTTP ${res.status}`);
console.log(data);

POST 请求（发数据）：

const res = await fetch('/api/comments', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ content: '你好', post_id: 42 })
});
const result = await res.json();

注意：JSON.stringify() 是必须的，fetch() 不会自动序列化对象；body 只接受字符串、FormData、Blob 等原生类型。