JavaScript中Ajax回调的核心是XMLHttpRequest对象，通过onload处理成功响应，需手动检查status处理4xx/5xx错误，避免回调地狱可命名函数分层调用。
JavaScript 中使用 Ajax 配合回调函数处理异步响应，核心是通过 XMLHttpRequest 对象发起请求，并在 onload（或旧式 onreadystatechange）中执行回调函数来处理服务器返回的数据。
基础写法：用 onload 绑定成功回调
现代推荐方式是监听 load 事件，它在请求完成且状态码为 2xx 或 3xx 时触发，比 onreadystatechange 更简洁可靠：
- 创建
XMLHttpRequest实例 - 调用
open()设置请求方法和 URL（第三个参数设为true表示异步） - 设置
onload回调函数，在其中处理responseText或response - 调用
send()发起请求
示例：
function ajaxGet(url, callback) {
const xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.onload = function() {
if (xhr.status >= 200 && xhr.status < 300) {
callback(null, xhr.responseText);
} else {
callback(new Error(`HTTP ${xhr.status}`), null);
}
};
xhr.onerror = function() {
callback(new Error('Network error'), null);
};
xhr.send();
}
// 使用示例
ajaxGet('/api/user', function(err, data) {
if (err) {
console.error('加载失败：', err.message);
} else {
console.log('用户数据：', data);
}
});
支持 POST 和 JSON 数据的封装
实际项目中常需发送 JSON 数据并接收 JSON 响应，可扩展回调函数支持更通用的场景：
立即学习“Java免费学习笔记（深入）”；
- 设置
Content-Type请求头为application/json（POST 时） - 用
JSON.stringify()序列化请求体 - 用
JSON.parse()解析响应（注意加 try-catch 防止解析失败） - 回调函数统一接收
(err, result)形参，符合 Node.js 风格约定
示例：
function ajaxPost(url, data, callback) {
const xhr = new XMLHttpRequest();
xhr.open('POST', url, true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onload = function() {
let result;
try {
result = JSON.parse(xhr.responseText);
} catch (e) {
callback(new Error('Invalid JSON response'), null);
return;
}
if (xhr.status >= 200 && xhr.status < 300) {
callback(null, result);
} else {
callback(new Error(`Server error: ${xhr.status}`), null);
}
};
xhr.onerror = () => callback(new Error('Request failed'), null);
xhr.send(JSON.stringify(data));
}
避免回调地狱：用命名函数提升可读性
多个 Ajax 请求嵌套容易导致“回调地狱”。即使不升级到 Promise，也可通过命名回调函数拆分逻辑：
- 把每个步骤封装成独立函数，如
handleUserLoaded、loadPostsByUserId - 前一个回调中只负责调用下一个 Ajax 函数，并传入后续处理函数
- 错误统一由各层回调自己处理，避免层层透传
例如：
function loadUserProfile(id, done) {
ajaxGet(`/api/users/${id}`, function(err, userJson) {
if (err) return done(err);
const user = JSON.parse(userJson);
loadUserPosts(user.id, function(err, posts) {
if (err) return done(err);
done(null, { user, posts });
});
});
}
注意事项与常见坑
使用原生 Ajax 回调时需留意以下细节：
-
onload不会捕获 4xx/5xx 状态码，必须手动检查xhr.status - 不要依赖
onreadystatechange和readyState === 4，除非兼容极老浏览器 - 跨域请求需服务端设置
Access-Control-Allow-Origin，否则会触发onerror且无详细错误信息 - 回调函数中的
this指向XMLHttpRequest实例，如需访问外部变量建议用箭头函数或闭包
不复杂但容易忽略。
