return value from function with XMLhttprequest

Question

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

Answer 1

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?