AJAX 教程
AJAX（Asynchronous JavaScript And XML，异步的 JavaScript 与 XML）泛指「不刷新整个网页，也能和服务器悄悄交换数据」的技术。搜索框自动弹联想词、点「加载更多」追加内容、点赞数字加一，背后都是它。
前面学过 JSON 教程，但那些 JSON 都是写死在代码里的。本章用浏览器自带的 fetch 把真实的 JSON 请求回来，再把数据渲染成页面——前端从「能显示」进化到「能联网」。
章节目录
| 章节 | 内容 | 核心知识点 | 状态 |
|---|---|---|---|
| 1. AJAX 是什么 | 不刷新页面拿数据 | 同步与异步、请求-响应、HTTP 状态码 | ✅ 已上线 |
| 2. fetch：请求数据 | 把数据请求回来 | fetch()、Promise、res.json()、res.ok |
✅ 已上线 |
| 3. 渲染数据 | 把 JSON 变成页面 | 遍历数组、模板字符串、innerHTML |
✅ 已上线 |
| 4. POST 提交数据 | 不只是拿，还要给 | method、headers、body、GET vs POST |
✅ 已上线 |
| 5. async/await 与错误处理 | 更清爽的写法 | async 函数、try/catch、加载状态 | ✅ 已上线 |
| 6. 综合练习 | 迷你用户名片墙 | 请求→渲染→搜索过滤→加载与错误态 | ✅ 已上线 |
学这章之前
- 先过 JavaScript 教程：会函数、DOM 操作和基本的数组方法
- 强烈建议先学 JSON 教程：接口返回的就是 JSON，不会拆数据等于白请求
- 不需要会后端：练习全部用免费公共测试接口 JSONPlaceholder，打开就能跑
AJAX 在站里的位置
| 场景 | 例子 | 配套教程 |
|---|---|---|
| 接口返回 JSON | fetch 用户列表并渲染成名片墙 |
本章主线 |
| 提交表单 | 登录、注册把数据 POST 给服务器 | 第 4 章 |
| 大模型 API | 给 AI 接口发请求、收 JSON 回复 | LLM 教程 |
记忆口诀
fetch 发请求，json 拆数据；ok 要自查，渲染靠循环。
动手建议
从 第 1 章：AJAX 是什么 开始 🐸