XMLHttpRequest没有响应

时间:2017-02-15 00:32:18

标签: javascript html xmlhttprequest

我想要的是非常简单:我有一个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()来测试它。

这应该在选择菜单中添加一个选项,只是说&#34; test&#34;,对吧?我认为这是答案非常明显的问题之一。请帮我。这段代码已经无法运行很长时间了,我非常想死。

1 个答案:

答案 0 :(得分:1)

在xhr请求完成之前返回

data。您可以通过将其返回到回调函数来解决此问题。

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