JavaScript 中怎么使用 Ajax 配合回调函数处理异步响应-js教程-PHP中文网

javascript中ajax回调的核心是xmlhttprequest对象，通过onload处理成功响应，需手动检查status处理4xx/5xx错误，避免回调地狱可命名函数分层调用。

javascript 中怎么使用 ajax 配合回调函数处理异步响应

JavaScript 中使用 Ajax 配合回调函数处理异步响应，核心是通过 XMLHttpRequest 对象发起请求，并在 onload（或旧式 onreadystatechange）中执行回调函数来处理服务器返回的数据。

基础写法：用 onload 绑定成功回调

现代推荐方式是监听 load 事件，它在请求完成且状态码为 2xx 或 3xx 时触发，比 onreadystatechange 更简洁可靠：

创建 XMLHttpRequest 实例
调用 open() 设置请求方法和 URL（第三个参数设为 true 表示异步）
设置 onload 回调函数，在其中处理 responseText 或 response
调用 send() 发起请求

示例：

Java Maven Code Review

审查Java Maven项目（ZIP压缩包或GitLab仓库URL），检查代码规范、命名、模块边界、可维护性问题以及重复代码。

下载

function ajaxGet(url, callback) {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status

支持 POST 和 JSON 数据的封装

实际项目中常需发送 JSON 数据并接收 JSON 响应，可扩展回调函数支持更通用的场景：

设置 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  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 });
    });
  });
}