在前端开发中，Ajax（Asynchronous JavaScript and XML）是实现'无刷新交互'的核心技术，尤其在后台管理系统、电商平台等场景中，Ajax 几乎是前端与后端通信的标配。尽管如今 Fetch API、Axios 等工具层出不穷，但基于 jQuery 的 Ajax 仍因兼容性好、上手简单，广泛应用于各类传统项目（如后台管理系统）。本文将从原理到实战，拆解 Ajax 的核心逻辑，封装通用请求方案，并总结高频避坑点，帮助开发者打造高可靠、易维护的 Ajax 请求体系。
一、Ajax 核心认知：不止是'异步请求'
1. 什么是 Ajax？
Ajax 并非单一技术，而是一套组合方案：通过 JavaScript 异步发送 HTTP 请求，获取服务器数据后，通过 DOM 操作更新页面，全程无需刷新浏览器。其核心是 XMLHttpRequest（XHR）对象 —— 浏览器内置的用于与服务器交互的 API，而 jQuery Ajax 本质是对 XHR 的封装，简化了底层操作。
2. Ajax 核心工作流程
无论原生 XHR 还是 jQuery Ajax，核心流程一致：
- 创建请求对象
- 配置请求参数（URL、方法、请求头）
- 发送请求到服务器
- 监听请求状态变化
- 解析响应数据并更新页面
- 处理错误（404/500/网络异常）
3. 原生 XHR 示例（理解底层逻辑）
先通过原生 XHR 实现一个简单的 GET 请求，理解 Ajax 的本质：
// 1. 创建 XHR 对象
const xhr = new XMLHttpRequest();
// 2. 配置请求（方法、URL、是否异步）
xhr.open('GET', '/pc/goods/list', true);
// 3. 设置请求头（如携带 Token）
xhr.setRequestHeader('token', sessionStorage.getItem('token'));
// 4. 监听状态变化
xhr.onreadystatechange = function() {
// readyState=4 表示请求完成；status=200 表示响应成功
if (xhr.readyState === 4 && xhr.status === 200) {
// 5. 解析响应数据（后台返回 JSON 格式）
const res = JSON.parse(xhr.responseText);
console.(, res);
(res.);
}
};
xhr. = () {
.();
};
xhr.();
