AJAX函数返回undefined，如何在外部获取responseText字符串？

这个问题我太熟了——核心原因就是AJAX默认是异步执行的，你的getFile()函数根本没等请求完成就先返回了，自然拿不到结果。

问题拆解 #

当你调用alert(getFile())时，代码执行顺序是这样的：

1. 调用getFile()，创建XMLHttpRequest对象、设置回调，然后发送请求
2. 因为请求是异步的，JavaScript不会等着它完成，直接让getFile()返回（这时候还没拿到响应，所以返回undefined）
3. 过了一会儿AJAX请求完成，触发onreadystatechange回调，这时候responseText才有值，所以直接在回调里alert能看到结果

那怎么才能在AJAX外部拿到这个内容呢？下面给你三种实用方案，按推荐程度排序：

方案1：用回调函数（最兼容，传统方式） #

修改getFile，让它接受一个回调函数作为参数，等请求成功后把结果传给这个回调：

function getFile(callback) {
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function stateChanged() {
    // 别忘了加状态码判断，确保请求是成功的
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      callback(xmlhttp.responseText);
    }
  };
  xmlhttp.open("GET", "你的模板文件路径", true);
  xmlhttp.send();
}

// 调用的时候这么写
getFile(function(templateContent) {
  alert(templateContent); // 这里就能拿到正确的内容啦
});

方案2：用Promise+async/await（ES6+，最优雅） #

把AJAX请求包装成Promise，这样可以用更清晰的方式处理异步结果，还能方便地捕获错误：

function getFile() {
  return new Promise((resolve, reject) => {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function stateChanged() {
      if (xmlhttp.readyState == 4) {
        if (xmlhttp.status == 200) {
          resolve(xmlhttp.responseText); // 请求成功，把结果传出去
        } else {
          reject(new Error(`请求失败：状态码 ${xmlhttp.status}`)); // 请求失败，抛出错误
        }
      }
    };
    xmlhttp.open("GET", "你的模板文件路径", true);
    xmlhttp.send();
  });
}

// 方式A：用.then()链式调用
getFile()
  .then(content => alert(content))
  .catch(error => console.error(error));

// 方式B：用async/await（需要在async函数内使用）
async function showTemplate() {
  try {
    const content = await getFile();
    alert(content);
  } catch (error) {
    console.error("加载模板出错：", error);
  }
}
showTemplate();

方案3：同步AJAX（极度不推荐） #

把AJAX改成同步模式（open的第三个参数设为false），这样getFile()会等请求完成后再返回结果。但这种方式会阻塞浏览器主线程——页面会卡住，直到请求完成，用户体验极差，除非特殊情况，否则绝对不要用：

function getFile() {
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.open("GET", "你的模板文件路径", false); // 同步请求
  xmlhttp.send();
  return xmlhttp.status == 200 ? xmlhttp.responseText : null;
}

// 这时候alert(getFile())能拿到值，但页面会卡住！
alert(getFile());

最后总结 #

异步是JavaScript的核心特性，AJAX默认异步就是为了不阻塞页面交互。所以优先用回调或者Promise/async-await的方式处理异步结果，同步AJAX能不用就不用。

内容的提问来源于stack exchange，提问作者Daniel Williams