如何将AJAX函数的xmlhttp.responseText返回至调用它的函数？

嘿，这个问题我太熟了！核心坑点就是AJAX的异步特性——你的myfunc()会在AJAX请求还在后台跑的时候就继续往下执行，所以直接return肯定拿不到值。给你两种实用的解决方案，都是日常开发里常用的：

方法1：用回调函数直接传递（最经典的写法） #

把需要处理返回值的逻辑打包成一个函数，传给ajaxfunc，等AJAX请求成功后，直接调用这个回调函数把数据丢进去就行。

修改后的完整代码示例：

// 给ajaxfunc新增一个callback参数，用来接收处理返回值的函数
function ajaxfunc(adiv, url, parameter, callback){ 
  let xmlhttp; // 用let声明，避免全局变量冲突
  if(window.XMLHttpRequest){ 
    xmlhttp = new XMLHttpRequest(); 
  }else{ 
    xmlhttp = new ActiveXObject('Microsoft.XMLHTTP'); 
  } 
  xmlhttp.onreadystatechange = function(){ 
    if(xmlhttp.readyState == 4 && xmlhttp.status == 200){ 
      const responseText_data = xmlhttp.responseText; 
      // 调用回调函数，把拿到的responseText传进去
      callback(responseText_data);
    } 
  }
  // 别忘了这两步！原来的代码里漏了发送请求的逻辑
  xmlhttp.open("GET", url + "?" + parameter, true); // 这里假设是GET请求，POST的话要调整
  xmlhttp.send();
}

// 调用ajaxfunc的myfunc函数
function myfunc() {
  // 传入回调函数，在这里写你拿到数据后的逻辑
  ajaxfunc('target-div', 'your-api-url', 'id=123', function(data) {
    console.log('拿到的返回值：', data);
    // 比如把数据渲染到页面上
    document.getElementById(adiv).innerHTML = data;
  });
}

方法2：用Promise封装（更现代的写法） #

如果你的项目里有多个异步操作要串联，Promise能让代码逻辑更清晰，避免嵌套太多的回调函数（俗称“回调地狱”）。

代码示例：

// 把ajaxfunc改成返回一个Promise对象
function ajaxfunc(adiv, url, parameter){ 
  return new Promise((resolve, reject) => {
    let xmlhttp;
    if(window.XMLHttpRequest){ 
      xmlhttp = new XMLHttpRequest(); 
    }else{ 
      xmlhttp = new ActiveXObject('Microsoft.XMLHTTP'); 
    } 
    xmlhttp.onreadystatechange = function(){ 
      if(xmlhttp.readyState == 4){
        if(xmlhttp.status == 200){ 
          const responseText_data = xmlhttp.responseText; 
          resolve(responseText_data); // 请求成功，把数据传递出去
        } else {
          // 请求失败的话，把错误信息传出去
          reject(new Error(`请求出错啦，状态码：${xmlhttp.status}`));
        }
      } 
    }
    xmlhttp.open("GET", url + "?" + parameter, true);
    xmlhttp.send();
  });
}

// 调用的时候可以用async/await（更直观）
async function myfunc() {
  try {
    const data = await ajaxfunc('target-div', 'your-api-url', 'id=123');
    console.log('拿到的返回值：', data);
    // 处理数据的逻辑写在这里
  } catch (error) {
    console.error('请求失败：', error);
  }
}

// 或者用.then()的方式，不支持async/await的环境也能用
function myfunc() {
  ajaxfunc('target-div', 'your-api-url', 'id=123')
    .then(data => {
      console.log('拿到的返回值：', data);
      // 处理数据
    })
    .catch(error => {
      console.error('请求失败：', error);
    });
}

最后提醒你两个小细节：

• 一定要加上xmlhttp.open()和xmlhttp.send()，不然AJAX请求根本不会发起哦；
• 变量xmlhttp最好用let声明，别让它变成全局变量，不然多次调用可能会有冲突。

内容的提问来源于stack exchange，提问作者Emanuel mwansasu