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 请求(查数据):
立即学习“Java免费学习笔记(深入)”;
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 请求(发数据):
AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。它不是新的编程语言,而是一种使用现有标准的新方法,最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容,不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。《php中级教程之ajax技术》带你快速
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?
上传文件、或表单含 时,必须用 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() 写多了反而更乱。










