javascript - return value from function with XMLhttprequest - Stack Overflow

admin管理员组

文章数量:1394578

I am very new to JS, trying to create simple page which does next:

1. takes IP of some server
2. then sends a get request to this server
3. parses get response,
4. adds filtered lines to the table on html page.

I was able to do all the steps through the browser console but when, moving to the JS file with get function for some reason function does not return value.

In below code snip line 6 will print undefined in the console. Any idea how to return "statuses" from the function getStatus? Should it be some timeout between line 5 and 6?

Thanks!

$("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;
    };
}
};

I am very new to JS, trying to create simple page which does next:

1. takes IP of some server
2. then sends a get request to this server
3. parses get response,
4. adds filtered lines to the table on html page.

I was able to do all the steps through the browser console but when, moving to the JS file with get function for some reason function does not return value.

In below code snip line 6 will print undefined in the console. Any idea how to return "statuses" from the function getStatus? Should it be some timeout between line 5 and 6?

Thanks!

$("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;
    };
}
};

• javascript
• jquery
• ajax

Share Improve this question Follow edited Mar 3, 2018 at 10:49 Ayank asked Mar 3, 2018 at 10:43 AyankAyank 4511 gold badge11 silver badge55 bronze badges 1

• Possible duplicate of How do I return the response from an asynchronous call? – Andreas Commented Mar 3, 2018 at 10:47

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

The problem with your code is that the status is returned after your your request has been sent. That gives a small delay. Because you immediatly ask for the return value of getStatus, you will get undefined. You could solve this problem with a callback function:

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

You call the getStatus function with a function, which is called after you got a response from you request. E.g:

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

EDIT

For a better and longer explanation, consider to check out How do I return the response from an asynchronous call?

本文标签： javascriptreturn value from function with XMLhttprequestStack Overflow