使用XMLHttpRequest从函数中返回值

Question

我对JS很陌生，尝试创建一个简单的页面，实现以下功能：

1. 输入某个服务器的IP地址
2. 向该服务器发送GET请求
3. 解析GET响应
4. 将筛选后的行添加到HTML页面的表格中。

我能够通过浏览器控制台执行所有步骤，但是当我尝试在JS文件中编写带有GET函数的代码时，函数似乎没有返回值。

下面的代码段中，第6行会在控制台打印undefined。你有任何想法如何从getStatus函数中返回“statuses”吗？是否需要在第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;
    };
}
};

- Ayank

---

可能是如何从异步调用中返回响应？的重复问题。 - Andreas

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

编辑

如果需要更好和详细的解释，请参考如何从异步调用中返回响应？

- Nicola Silvan Buehler