点此查看 所有教程、项目、源码导航
文章目录
- [1. 早期网页的痛点](#1. 早期网页的痛点)
- [2. AJAX 的发展历史](#2. AJAX 的发展历史)
-
- [2.1 1999 年：XHR 诞生](#2.1 1999 年：XHR 诞生)
- [2.2 2004 年前后：Gmail、Google Maps 出圈](#2.2 2004 年前后：Gmail、Google Maps 出圈)
- [2.3 2005 年：AJAX 这个名词正式诞生](#2.3 2005 年：AJAX 这个名词正式诞生)
- [2.4 后续演变](#2.4 后续演变)
- [3. AJAX 的准确概念](#3. AJAX 的准确概念)
- [4. HTTP 与接口基础认知](#4. HTTP 与接口基础认知)
-
- [4.1 常用请求方式](#4.1 常用请求方式)
- [4.2 常用响应状态码](#4.2 常用响应状态码)
- [4.3 接口是什么](#4.3 接口是什么)
- [5. 同步 和 异步（通俗理解）](#5. 同步 和 异步（通俗理解）)
-
- [5.1 同步](#5.1 同步)
- [5.2 异步](#5.2 异步)
- [6. 常见误区澄清（非常适合给学生强调）](#6. 常见误区澄清（非常适合给学生强调）)
- [7. 小结](#7. 小结)
前面我们已经学习了 JS 基础语法、DOM、BOM、本地存储。
从这一篇开始，我们进入网络通信的学习。
在正式写代码发请求之前，我们先搞懂 AJAX 到底是什么、它是怎么来的，理清很多新手容易混淆的概念。
1. 早期网页的痛点
在 AJAX 出现之前，网页的交互模式非常简单：浏览器向服务器发送请求，服务器返回一整个全新的网页，浏览器刷新、整页替换内容。
比如，我们提交表单、点击分页，浏览器都会白屏，页面全部重新加载。
哪怕我们只需要修改页面里一小段文字，也要把整个页面重新请求、重新渲染，存在两个明显问题：
- 速度慢，要传输大量重复的 HTML 内容；
- 体验差，页面刷新会打断用户操作，输入框里写好的内容经常直接丢失。
当时的网页更像一份 "静态文档"，而不是我们现在熟悉的、流畅的网页应用。大家一直希望有一种方式：只在后台和服务器拿需要的数据，只更新页面局部，不用刷新整个网页。
附加信息：实际开发里，这一套前后通信是前端、后端工程师配合完成的。前端负责页面展示、收集用户输入、发起请求；后端负责编写接口、操作数据库、返回数据。双方按照接口文档约定好地址、参数、返回格式，AJAX 就是前端和后端传递数据的通道。
作为前端初学者，咱们不需要知道后端是怎么开发后端接口的，直接按接口约定调用即可。在本教程中，我会提前写好真实的后端接口，大家可以直接拿来用就行。如果去企业真实工作的话，会有对应的后端工程师写好接口供前端调用的。
2. AJAX 的发展历史
很多同学会误以为，AJAX 是某一个新的 API、新语法，其实不是。
2.1 1999 年：XHR 诞生
微软为了网页版 Outlook 邮件系统，在 IE5 里面实现了 XMLHttpRequest（简称 XHR）对象，这就是最早可以在后台发请求的能力。
但是在很长一段时间里，这个能力很少被开发者使用，其他浏览器也慢慢跟进实现，但是没有形成风潮。
2.2 2004 年前后：Gmail、Google Maps 出圈
谷歌推出 Gmail 和谷歌地图，大量使用这套后台请求的方式。
拖拽地图的时候，后台悄悄加载瓦片图片；收发邮件不用刷新页面，大家第一次感受到网页可以像桌面软件一样流畅。
这个技术已经在用，但是还没有 AJAX 这个名字。
2.3 2005 年：AJAX 这个名词正式诞生
设计师 Jesse James Garrett 发表文章，把这套技术方案命名为 AJAX，全称：Asynchronous JavaScript And XML，异步 JavaScript 和 XML。
从此这个名字快速流行，开启了 Web2.0 的时代，网页从静态页面走向交互式网页应用。
2.4 后续演变
最早大家约定用 XML 格式传递数据；后来 JSON 出现，因为更加轻量、JS 原生友好，慢慢替代 XML，成为主流数据格式。
再后来浏览器新增了 fetch API，同样可以实现 AJAX 的效果。
重点一句话：XHR 是最早实现 AJAX 效果的 API；AJAX 是一套技术思想，不是某一个固定 API。
3. AJAX 的准确概念
AJAX 是一套技术方案、一种开发思想，不是新语言、不是单独的函数。
它的核心目标：在不刷新整个页面的前提下，浏览器在后台和服务器交换数据，拿到数据之后，使用 JS 局部更新页面 DOM。
它原本是多种已有技术组合在一起使用：
- HTML + CSS：页面展示
- DOM：JS 修改页面内容
- JavaScript：控制逻辑、发起请求
- XMLHttpRequest：用来和服务器通信
- XML：早期用来传输数据
到今天，概念已经泛化了：
只要满足「后台异步通信、不整页刷新、局部更新页面」，都可以叫做 AJAX 方案。
可以是 XHR，也可以是 fetch；数据格式大多用 JSON，很少再用 XML。
所以名字里的 XML，只是历史遗留，现在写 AJAX 代码几乎不用 XML。
4. HTTP 与接口基础认知
浏览器和服务器通信，需要遵守 HTTP 协议。
浏览器发给服务器的数据叫做请求 ；服务器返回给浏览器的数据叫做响应。
4.1 常用请求方式
- GET：一般用来查询、获取数据，参数会拼接在网址后面
- POST：一般用来提交、新增数据，数据放在请求体里面
4.2 常用响应状态码
- 200：请求成功
- 404：请求的地址不存在
- 500：服务器内部出错
4.3 接口是什么
接口，就是后端提前写好的一个网络地址，专门用来接收前端的请求，处理之后返回数据。前端通过 AJAX 去访问这个接口。
5. 同步 和 异步（通俗理解）
5.1 同步
浏览器发出请求，然后原地等待服务器返回结果，等待期间页面卡住，用户不能做任何操作，服务器返回之后，代码继续往下走。
5.2 异步
浏览器发起请求之后，不会卡住，代码继续往下执行，用户可以正常操作页面；等服务器数据返回之后，再自动执行对应的回调代码，处理数据、更新页面。
AJAX 的核心优势就是异步，不会阻塞页面。
6. 常见误区澄清（非常适合给学生强调）
误区 1：AJAX = XMLHttpRequest
✅ 正确：XHR 是实现 AJAX 的经典方式；fetch 也是实现 AJAX 的方式。AJAX 是思想，XHR、fetch 是工具。
误区 2：AJAX 必须使用 XML
✅ 正确：名字里的 XML 是历史习惯，现在主流是 JSON。
误区 3：AJAX 是浏览器专属语法
✅ 正确：AJAX 描述的是 "前端和服务器异步通信局部刷新" 的模式，Node 里面也有网络请求，但我们一般说 AJAX，特指浏览器端的这套交互。
补充说明：fetch 属于广义 AJAX 方案，但是它不等同于老式的 XHR。
7. 小结
AJAX 的出现，彻底改变了网页的形态。在它之前，网页是 "翻页文档"；在它普及之后，网页变成了可以实时交互的应用。
记住核心：AJAX 就是不刷新页面，后台和服务器拿数据、传数据，局部更新页面的一套技术思想。