javascript - XMLHttpRequest 无响应

Question

这个问题已经有答案了:

How do I return the response from an asynchronous call? (42 个回答)

已关闭 6 年前。

我想要的非常简单:我有一个 javascript 服务器和一个 HTML 客户端，我只想从服务器获取一个字符串，然后 HTML 页面将其添加到其下拉菜单之一。共有三个相关的代码块:

function stringLoader(){
  var xhr = new XMLHttpRequest();
  var url = "/pathname";

  xhr.open("GET",url);

  xhr.setRequestHeader("Content-Type", "text/xml");

  xhr.onreadystatechange = function () {
    if (xhr.readyState == 4) {
      if (xhr.status == 200) {
        var data = xhr.responseText;
      }
    }
  };
  xhr.send();

  return data;
  }

function loaderCaller(){
  var element = document.getElementById("Menu");
  //"Menu" is the html <select> box I want to add to
  var option = document.createElement("option");
  option.text = stringLoader();
  element.add(option);
  }

这两个位于客户端的脚本标记中。我的服务器中的相关代码是这样的:

function handleRequest(req, res) {
//process the request
console.log("Request for: "+req.url);
var filename = ROOT + req.url;
var urlObj = url.parse(req.url, true);


var code = 200;
var data = "";

if(req.method === 'GET' && urlObj.pathname === ("/pathname")){
  res.writeHead(code, {'content-type': 'text/html'});
  res.send("test");
}

我知道如果我将 stringLoader 设置为返回字符串而不是变量， loaderCaller() 将添加该选项，因此问题不在于此。我还知道服务器中的 if{} 正在执行，因为我已经调用了几个 console.log() 来测试它。

这应该在选择菜单中添加一个选项，只显示“测试”，对吗？我认为这是答案显而易见的问题之一。请帮我。这段代码已经无法运行好几个小时了，我非常想死。

Answer 1

data 在 xhr 请求完成之前返回。您可以通过将其返回到回调函数来解决此问题。

function stringLoader(callback){
  var xhr = new XMLHttpRequest();
  var url = "/pathname";

  xhr.open("GET",url);

  xhr.setRequestHeader("Content-Type", "text/xml");

  xhr.onreadystatechange = function () {
    if (xhr.readyState == 4) {
      if (xhr.status == 200) {
          var data = xhr.responseText;
          callback(data);
      }
    }
  };
  xhr.send();
}

function loaderCaller(){
    var element = document.getElementById("Menu");
    var option = document.createElement("option");
    stringLoader(function(data) {
        option.text = data;
        element.add(option);
    });
}