本文详解 Ajax 异步请求技术，涵盖原生 XHR 原理及 jQuery 封装实战。内容包括通用请求函数封装、全局拦截器配置、防重复提交与取消请求策略，以及常见错误（404/401/500）的解决方案。同时对比了 Ajax、Fetch 与 Axios 的适用场景，旨在帮助开发者构建高可靠的前端通信体系。
在前端开发中，Ajax（Asynchronous JavaScript and XML）是实现'无刷新交互'的核心技术，尤其在后台管理系统、电商平台等场景中，Ajax 几乎是前端与后端通信的标配。尽管如今 Fetch API、Axios 等工具层出不穷，但基于 jQuery 的 Ajax 仍因兼容性好、上手简单，广泛应用于各类传统项目（如后台管理系统）。本文将从原理到实战，拆解 Ajax 的核心逻辑，封装通用请求方案，并总结高频避坑点，帮助开发者打造高可靠、易维护的 Ajax 请求体系。
Ajax 并非单一技术，而是一套组合方案：通过 JavaScript 异步发送 HTTP 请求，获取服务器数据后，通过 DOM 操作更新页面，全程无需刷新浏览器。其核心是 （XHR）对象 —— 浏览器内置的用于与服务器交互的 API，而 jQuery Ajax 本质是对 XHR 的封装，简化了底层操作。
XMLHttpRequest无论原生 XHR 还是 jQuery Ajax，核心流程一致：
先通过原生 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.log('请求成功：', res);
// 更新页面 DOM
renderGoodsList(res.data);
}
};
// 6. 处理错误
xhr.onerror = function() {
console.error('网络异常，请求失败');
};
// 7. 发送请求
xhr.send();
原生 XHR 代码冗余，且需要手动处理状态、解析数据，这也是 jQuery Ajax 被广泛使用的原因 —— 它将上述逻辑封装为简洁的 API。
在后台管理系统（如礼盒商城后台）中，jQuery Ajax 是最常用的请求方式。以下结合实战场景，讲解核心用法和配置。
// 获取商品列表
function getGoodsList() {
$.ajax({
url: '/pc/goods/list', // 接口地址
type: 'GET', // 请求方法
data: { pageNum: 1, pageSize: 10 }, // 请求参数
headers: { 'token': sessionStorage.getItem('token') }, // 携带登录凭证
success: function(res) {
// 后台统一返回格式：{ code: 1, msg: '成功', data: [] }
if (res.code === 1) {
renderGoodsList(res.data); // 渲染列表
} else {
alert('获取列表失败：' + res.msg);
}
},
error: function(xhr, status, error) {
// 处理请求错误（404/500/网络异常）
console.error('请求失败：', status, error);
alert('网络异常，请重试');
}
});
}
// 删除商品
function deleteGoods(goodsId) {
$.ajax({
url: '/pc/goods/del',
type: 'POST',
data: { ids: goodsId }, // 提交删除 ID
contentType: 'application/x-www-form-urlencoded', // 默认编码格式
success: function(res) {
if (res.code === 1) {
alert('删除成功');
getGoodsList(); // 刷新列表
} else {
alert('删除失败：' + res.msg);
}
},
error: function() {
alert('删除失败，请重试');
}
});
}
在实际项目中，每个页面都写重复的 Ajax 配置会导致代码冗余、维护困难。结合后台管理系统的共性（统一的 token、统一的错误处理、统一的返回格式），封装一个通用请求函数是必做的优化。
/**
* 通用 Ajax 请求函数
* @param {Object} options - 请求配置
* @param {string} options.url - 接口地址（无需写域名，已配置代理）
* @param {string} [options.type='POST'] - 请求方法
* @param {Object} [options.data={}] - 请求参数
* @param {Function} options.success - 成功回调（仅处理业务成功）
* @param {Function} [options.error] - 自定义错误回调（可选）
*/
function request(options) {
// 默认配置
const defaultConfig = {
type: 'POST',
data: {},
headers: {
'token': sessionStorage.getItem('token'), // 统一携带 token
'Content-Type': 'application/x-www-form-urlencoded'
},
dataType: 'json', // 预期返回 JSON 格式
timeout: 10000, // 超时时间 10 秒
// 全局错误处理
error: function(xhr, status, error) {
// 1. 处理 token 失效（后台返回 401 状态码）
if (xhr.status === 401) {
alert('登录已过期，请重新登录');
window.location.href = './html/auth/login.html';
return;
}
// 2. 处理其他错误（404/500/超时）
const errorMsg = {
'404': '接口不存在',
'500': '服务器内部错误',
'timeout': '请求超时',
'error': '网络异常'
}[status] || '请求失败';
// 优先执行自定义错误回调，否则默认提示
if (options.error) {
options.error(errorMsg);
} else {
alert(errorMsg);
}
}
};
// 合并用户配置与默认配置
const config = $.extend({}, defaultConfig, options);
// 重写 success 回调：统一处理后台返回的 code
config.success = function(res) {
// 业务成功（code=1）执行自定义 success
if (res.code === 1) {
options.success(res.data);
} else {
// 业务失败（如参数错误、权限不足）
alert('操作失败：' + res.msg);
}
};
// 发送请求
$.ajax(config);
}
// 1. 获取商品列表（GET 请求）
request({
url: '/pc/goods/list',
type: 'GET',
data: { pageNum: 1, pageSize: 10 },
success: function(data) {
renderGoodsList(data); // 仅处理业务成功的逻辑
}
});
// 2. 删除商品（POST 请求）
request({
url: '/pc/goods/del',
data: { ids: 1001 },
success: function() {
alert('删除成功');
getGoodsList(); // 刷新列表
},
error: function(msg) {
// 自定义错误提示
console.error('删除失败：', msg);
}
});
虽然 jQuery Ajax 没有原生的'拦截器'，但可通过重写 $.ajaxSetup() 实现全局拦截：
// 全局请求拦截：统一添加请求头、loading 状态
$.ajaxSetup({
beforeSend: function(xhr) {
// 1. 显示 loading 弹窗
$('.loading').show();
// 2. 统一添加 token
xhr.setRequestHeader('token', sessionStorage.getItem('token'));
},
complete: function() {
// 请求完成（成功/失败）隐藏 loading
$('.loading').hide();
}
});
在提交表单 / 删除数据时，重复点击会导致多次请求，可通过'锁机制'解决：
let isSubmitting = false; // 请求锁
$('.btn-submit').click(function() {
if (isSubmitting) return; // 已有请求在进行，直接返回
isSubmitting = true;
request({
url: '/pc/goods/add',
data: $('#goods-form').serialize(),
success: function() {
alert('添加成功');
},
error: function() {
// 错误也需要释放锁
isSubmitting = false;
},
complete: function() {
// 请求完成释放锁
isSubmitting = false;
}
});
});
当用户快速切换页面时，未完成的请求会浪费资源，可通过 abort() 取消：
// 存储当前请求的 XHR 对象
let xhr = null;
function getGoodsList() {
// 如果有未完成的请求，先取消
if (xhr) {
xhr.abort();
}
xhr = $.ajax({
url: '/pc/goods/list',
success: function(res) {
renderGoodsList(res.data);
xhr = null; // 请求完成清空
}
});
}
// 页面切换时取消请求
$('.menu-item').click(function() {
if (xhr) {
xhr.abort();
}
});
Ajax 请求默认受'同源策略'限制（协议、域名、端口需一致），后台管理系统中常见的跨域解决方案：
Access-Control-Allow-Origin: *（或指定域名）；| 常见问题 | 原因 | 解决方案 |
|---|---|---|
| 404 Not Found | 接口 URL 错误、路径拼接错误 | 1. 检查 URL 是否与后端一致；2. 封装统一路径前缀（如 const baseUrl = '/pc'）；3. 用浏览器 Network 面板查看请求地址 |
| 401 Unauthorized | Token 失效 / 未携带 Token | 1. 统一在请求头携带 Token；2. 监听 401 状态码，自动跳转到登录页；3. 登录时更新 Token |
| 403 Forbidden | 权限不足 | 1. 检查用户角色与接口权限；2. 前端添加权限校验，无权限时隐藏按钮 |
| 500 Internal Server Error | 后端接口异常 | 1. 查看 Network 面板的响应内容；2. 配合后端排查接口逻辑；3. 前端添加错误提示，避免白屏 |
| 异步回调地狱 | 多层请求嵌套（如先查分类，再查商品） | 1. 用 Promise 封装 Ajax，配合 async/await；2. 避免多层嵌套，拆分独立函数 |
| 参数传递失败 | POST 请求参数格式错误 | 1. 确认 contentType：表单格式用 application/x-www-form-urlencoded，JSON 格式用 application/json；2. 复杂参数用 JSON.stringify() 转换 |
| 特性 | Ajax（jQuery） | Fetch API | Axios |
|---|---|---|---|
| 兼容性 | 好（支持 IE6+） | 差（IE 不支持） | 中（需 polyfill） |
| 易用性 | 高（封装完善） | 中（原生 API，需手动处理解析） | 高（Promise 封装，拦截器） |
| 功能 | 基础（无拦截器、取消请求需手动处理） | 基础（需封装） | 丰富（拦截器、取消请求、超时处理） |
| 适用场景 | 传统后台系统、老项目 | 现代前端项目（React/Vue） | 中大型前端项目 |
建议：
Ajax 作为前端异步请求的核心技术，其本质是 XMLHttpRequest 的封装与应用。在后台管理系统等实战场景中，掌握以下核心要点即可打造高可靠的请求体系：
beforeSend/complete 处理 loading、权限校验；掌握 Ajax 的原理与实战技巧，不仅能解决日常开发中的请求问题，更能理解前端与后端通信的核心逻辑 —— 这也是前端工程师从'会用'到'精通'的关键一步。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online