一、什么是 AJAX
AJAX（Asynchronous JavaScript And XML）是浏览器赋予 JavaScript 的一套 API，通过这套 API，JavaScript 能够实现网络通信的能力。它允许网页在不重新加载整个页面的情况下，与服务器进行数据交互，从而实现动态更新页面内容的效果。这种技术极大地提升了用户体验，使得 Web 应用能够更加流畅、高效地运行。
二、 历史背景
浏览器本身具备网络通信的能力，但在早期，这种能力并未开放给 JavaScript。最早是微软在 IE 浏览器中将这一能力开放给 JavaScript，允许 JavaScript 在代码中发送请求。这项技术在 2005 年被正式命名为 AJAX。
IE 浏览器使用了一套 API 来完成请求的发送，这套 API 主要依赖于一个构造函数 XMLHttpRequest（简称 XHR）。因此，这套 API 也被称为 XHR API。然而，XHR API 存在诸多缺陷，例如使用复杂、难以处理错误等。
随着 HTML5 和 ES6 的发布，出现了一套更完善的 API 来发送请求，这套 API 主要使用一个名为 fetch 的函数，因此被称为 Fetch API。Fetch API 提供了更简洁、更强大的功能，逐渐成为现代 Web 开发中的首选。
总结：无论是 XHR 还是 Fetch，它们都是实现 AJAX 的技术手段，只是 API 不同。
三、 XHR API
以下是使用 XHR API 发送请求的基本步骤：
JavaScript复制
let xhr = new XMLHttpRequest(); // 创建发送请求对象
xhr.onreadystatechange = () => { // 当前请求状态发生改变时运行的函数
// xhr.readyState：一个数字，用于判断请求到了哪个阶段
// 0：刚刚创建好了请求对象，但还未配置请求（未调用 open 方法）
// 1：open 方法已被调用
// 2：send 方法已被调用
// 3：正在接收服务器的响应消息体
// 4：服务器响应的所有内容均已接收完毕
// xhr.responseText：获取服务器响应消息体文本
// xhr.getResponseHeader("Content-Type")：获取响应头中的 Content-Type
};
xhr.open("请求方法", "请求地址"); // 配置请求
xhr.setRequestHeader("Content-Type", "application/json"); // 设置请求头
xhr.send("请求体内容"); // 构建请求体，发送到服务器；如果没有请求体，传送 null
四、 Fetch API
Fetch API 提供了一种更简洁、更现代的方式来发送网络请求。以下是使用 Fetch API 的基本示例：
JavaScript复制
const resp = await fetch("url地址", { // 请求配置对象，可省略，省略则所有配置为默认值
method: "请求方法", // 请求方法，默认为 GET
headers: { // 配置请求头
"Content-Type": "application/json",
test: "test",
},
body: "请求体内容" // 请求体
});
resp.headers; // 获取响应头对象
resp.status; // 获取响应状态码
resp.statusText; // 获取响应状态码文本
resp.json(); // 使用 JSON 格式解析即将到来的响应体，返回 Promise，解析完成后得到一个对象
resp.text(); // 使用纯文本格式解析即将到来的响应体，返回 Promise，解析完成后得到一个字符串
特别注意
无论使用哪种 API，AJAX 始终是异步的。 这意味着请求的发送和响应的接收不会阻塞页面的其他操作，从而保证了用户体验的流畅性。
总结
AJAX 是一种强大的技术，它通过 XHR 或 Fetch API 使 JavaScript 能够实现网络通信。虽然 XHR API 是早期的实现方式，但 Fetch API 以其简洁和强大的功能逐渐成为现代 Web 开发的首选。无论选择哪种 API，AJAX 的异步特性都为 Web 应用带来了更好的用户体验。
希望这篇文章能帮助你更好地理解 AJAX 以及如何使用 XHR 和 Fetch API 实现网络通信。
