AJAX是什么？如何与服务器交互

AJAX 是一种通过 JavaScript 在不刷新页面的前提下与服务器异步通信、实现局部内容更新的核心 Web 技术，其现代实践首选简洁强大、基于 Promise 的 `fetch()` API；本文不仅清晰对比了 `fetch()` 与 `XMLHttpRequest` 的优劣，更直击开发中高频踩坑点——如凭空丢失 Cookie、HTTP 错误状态不抛异常、JSON POST 忘设 headers、文件上传必须用 FormData 等，并强调真正挑战在于请求编排、取消、错误统一处理与缓存等工程化封装，帮你避开“写得越多越混乱”的陷阱，快速写出健壮、可维护的前端数据交互逻辑。

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 等原生类型。

什么时候该用 FormData 而不是 JSON？

上传文件、或表单含 <input type="file"> 时，必须用 FormData。它能自动处理多部分编码（multipart/form-data），而 JSON 无法表示二进制文件。

实操要点：

• 创建后直接 append 字段：const fd = new FormData(); fd.append('title', '测试');
• 传文件时，append 的第二个参数可以是 File 对象（来自 input.files[0]）
• 不用手动设 Content-Type 头——fetch() 会自动设置并带上边界符
• 后端接收时，不能按 JSON 解析，得用 multipart 解析器（如 Express 的 multer）

真正难的不是发请求，而是处理并发、取消重复请求、统一错误提示、缓存策略——这些没封装好，fetch() 写多了反而更乱。

理论要掌握，实操不能落！以上关于《AJAX是什么？如何与服务器交互》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！