Javascript Xmlhttprequest Scope Function

Question

function getMensages(){
    var xhr = new XMLHttpRequest();
    xhr.open('GET', '../mensagens.php');
    xhr.send();
    xhr.onload=function(){
        if (xhr.readyState==4 && xhr.status==200){
            jsonText = xhr.responseText;
            jsonObj = JSON.parse(jsonText);
        }
       return jsonObj;
   }
}

getMensages();

console.log(jsonObj);

How do I get the variable jsonObj outside the scope of the function xhr.onload() and out of function getMensages()? When calling the function xhr.onload() is already returning object I want but need the object in the variable outside the scopes.

Answer 1

To have this variable in the global scope you can do window.jsonObj = jsonObj; (which is better than defenir without using var), but that won’t solve the problem. Remember that AJAX is open and when you call the value will only be passed to the variable jsonObj when the server responds, which implies that the code you have has already run and the console.log() was recorded without the variable having been completed.

You have to adapt your code to run within the function xhr.onload. In the case of your code console.log() should be there to record the right value.

xhr.onload=function(){
    if (xhr.readyState==4 && xhr.status==200){
        jsonText = xhr.responseText;
        jsonObj = JSON.parse(jsonText);
        console.log(jsonObj);  // aqui será chamado quando a resposta tiver chegado
    }
}

Answer 2

function getMensages(callback){
    var xhr = new XMLHttpRequest();
    xhr.open('GET', '../mensagens.php');
    xhr.send();
    xhr.onload=function(){
        if (xhr.readyState==4 && xhr.status==200){
            jsonText = xhr.responseText;
            jsonObj = JSON.parse(jsonText);
            if(callback) callback(jsonObj);
        }
       //return jsonObj;
   }
}

var cback = function(jsonObj) {
  console.log(jsonObj);
};

getMensages(cback);