← 返回目录

2. AJAX 基础概念与通信原理

先把 AJAX 想成"点了按钮悄悄去后台拿货，不用整页刷新"。你在百度搜索时，下拉框一边打字一边出联想词，页面没有刷新；你刷淘宝筛选商品，结果区域变了但页面没白屏——这些都是 AJAX。

在 AJAX 出现之前，网页很"笨重"：你点一个按钮，浏览器就得把整个页面重新加载一遍，中间白屏转圈，用户体验很差。有了 AJAX 之后，浏览器可以在后台偷偷发一个小请求，只拿需要的那一小块数据，然后只更新页面的局部区域。这就是 AJAX 的核心能力：异步 + 局部更新。

2.1 互动演示（通信流程 7 步动画）

2.2 知识点讲解

① AJAX 是什么？全称和核心能力

AJAX 全称 Asynchronous JavaScript and XML，翻译过来是"异步 JavaScript 和 XML"。这里有两个关键词：

异步（Asynchronous）= 不等它办完，先干别的事。就像你点外卖，点完之后你不会坐在手机旁边死等，你可以继续看电视，外卖到了骑手打电话叫你。AJAX 也是这个道理：请求发出去之后，JS 继续往下执行别的代码，数据到了再"打电话"通知你。

XML 是早期用来传数据的格式，现在已经全面被 JSON 取代了，但名字保留着没改。你不用纠结 XML，知道它是个历史遗留名词就行。

// AJAX = Asynchronous JavaScript and XML（异步 JavaScript 和 XML）
// 早期 XML 是数据格式，现在全面替换为 JSON，名称保留沿用

// 传统网页交互（没有 AJAX 时）：
//  点击按钮 → 浏览器整页刷新 → 白屏等待 → 重新加载整个页面
//  体验差：页面闪一下、要等全部资源重新下载

// AJAX 核心能力（有了 AJAX 之后）：
//  不需要刷新整个页面，只在后台发一个小请求，
//  拿到一小块数据，然后只更新页面的局部区域
//  体验好：页面不闪、不白屏、操作流畅

// 生活里你天天在用 AJAX：
//  百度搜索的下拉联想词、淘宝筛选商品、
//  微博滚动加载更多、表单实时校验用户名是否已被注册

如果你以为 AJAX 就是"发请求"，那还不够——因为传统的 form 表单提交也会发请求，但它会整页刷新。AJAX 的关键是"不刷新页面，只局部更新"，这才是它区别于传统请求的地方。

② 核心依赖：XMLHttpRequest 对象

AJAX 这套功能不是凭空来的，它完全依托浏览器内置的一个构造函数——XMLHttpRequest（简称 XHR）。你可以把它想象成浏览器给你准备的"送货小哥"：你叫他去后端拿货，他去了，货到了他通知你。没有这个小哥，你就没法在不刷新页面的情况下去后端拿货。

// 整套 AJAX 功能完全依托浏览器内置构造函数 XMLHttpRequest（简写 XHR）
// 没有这个对象，就无法实现无刷新请求

let xhr = new XMLHttpRequest(); // 创建请求实例（叫一个新的送货小哥）

// ★ 重要：每发一次请求，都必须 new 一个新的 XHR 对象！
//  不能复用同一个 XHR 发第二次请求，
//  就像你不能让一个已经跑出去的小哥同时跑两趟。

如果你复用了同一个 XHR 对象发第二次请求，就会发现状态监听不触发、数据对不上——因为一个 XHR 一次只能管一个请求。每次都要 new XMLHttpRequest 新建。

③ 完整通信原理（7 步走一遍）

把 AJAX 想象成"你点外卖"的过程：你（前端）下单 → 骑手（浏览器）去餐厅（后端）→ 餐厅做菜打包 → 骑手送回来 → 你打开吃。下面 7 步就是完整流程：

1. 用户触发操作（ 点击 / 输入）， JS 创建 XMLHttpRequest 请求对象；→ 类比： 你打开外卖 APP 点了个餐

2. XHR 按照 HTTP 规范拼接： 请求地址、 请求方式、 请求头、 请求参数；→ 类比： 你选好了店铺、 菜品、 备注， 下单

3. 浏览器后台独立发起网络请求， 主线程 JS 继续运行（ 异步不阻塞页面）；→ 类比： 骑手接单出发， 你不用在家门口站着等， 可以继续干别的

4. 后端服务器接收请求， 读取参数、 查询数据库、 处理业务逻辑；→ 类比： 餐厅接单， 后厨开始炒菜

5. 后端组装 JSON 响应数据， 通过 HTTP 响应返回；→ 类比： 菜做好了， 打包好交给骑手

6. XHR 监听到响应完成， 触发状态事件， JS 拿到返回 JSON；→ 类比： 骑手送到了， 给你打电话

7. 使用 JSON.parse 转成 JS 对象， 操作 DOM 局部渲染， 全程不刷新网页；→ 类比： 你打开外卖盒， 把菜摆到桌上（ 只动桌子的一小块， 不重装修房间）

第 3 步是最关键的——请求在后台进行，页面不卡，你能继续点击、滚动、输入。因为这就是"异步"的含义：不等它办完，先干别的事。

④ 实战：用在哪 / 常见坑 / 怎么解决

可能在什么地方用：

① 搜索框输入时自动出联想词（百度/淘宝搜索框）；② 商品列表无限滚动加载更多；③ 表单填写时实时校验用户名是否已被占用；④ 不刷新页面点赞、收藏、购物车加减数量。

常见的问题：

① 以为 AJAX 就是 form 表单提交——其实 form 提交会整页刷新，AJAX 才是局部更新；② 忘记 new XMLHttpRequest 就直接调 xhr.open，报 undefined；③ 请求发出去了但页面没反应——因为没写 onreadystatechange 监听，货到了没人接电话；④ 以为"请求发出去就立刻有数据"——其实是异步的，代码往下跑完数据才到。

解决思路：

① 牢记 AJAX = new → open → 监听 → send 四步，少一步都不行；② 数据到了的逻辑必须写在 onreadystatechange 回调里，不能写在 send 后面立刻拿；③ 页面没反应先打开 Console 看有没有报错，再看 Network 面板请求有没有发出去。

2.3 课后思考