javascript - 使用 XMLhttprequest 从函数返回值

Question

我对 JS 很陌生，正在尝试创建接下来执行的简单页面:

1. 获取某个服务器的 IP
2. 然后向该服务器发送 get 请求
3. 解析得到响应，
4. 将过滤后的行添加到 html 页面上的表格中。

我能够通过浏览器控制台执行所有步骤，但是当由于某种原因使用 get 函数移动到 JS 文件时，函数不会返回值。

在下面的代码片段中，第 6 行将在控制台中打印 undefined。 知道如何从函数 getStatus 返回“状态”吗？ 第 5 行和第 6 行之间是否应该有一些超时？

谢谢!

$("input[type='text']").keypress(function(event){
   if(event.which === 13){
    var address = $(this).val();
    var urlStat = 'http://'+address+':666/bla?open=stats';
    var status = getStatus(urlStat);
    console.log(status);

    $("input[type='text']").val('');
    $('table').append("<tr><th>"+address+"</th><th><ul></ul></th><th></th></tr>");
}
});

function getStatus(url){
var xhr = new XMLHttpRequest;

xhr.open("GET", url);
xhr.send();
xhr.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {

    var regexStatus = /(\w+ state:.*?)</g
    var response = xhr.responseText;
    var statuses = response.match(regexStatus);
    console.log('Inside function getStatus'+statuses);
    return statuses;
    };
}
};

Answer 1

您的代码的问题是在您的请求发送后返回状态。这会产生一点延迟。因为您立即要求 getStatus 的返回值，所以您将得到 undefined。 您可以使用回调函数解决这个问题:

function getStatus(url,callback){
    var xhr = new XMLHttpRequest;

    xhr.open("GET", url);
    xhr.send();
    xhr.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {

            var regexStatus = /(\w+ state:.*?)</g
            var response = xhr.responseText;
            var statuses = response.match(regexStatus);
            console.log('Inside function getStatus'+statuses);
            if(callback) callback(statuses);
      };
   }
};

您可以使用一个函数来调用 getStatus 函数，该函数会在您收到请求的响应后调用。 例如:

getStatus(url,function(statuses){
    console.log(statuses);
});

编辑

要获得更好、更长的解释，请考虑查看 How do I return the response from an asynchronous call?