In AJAX how to retrive variable from inside of onreadystatechange = function ()

Answer 1

Why not change MyVariable's scope to outside of the function?

var MyVariable;    
function ajaxFunction(){
    //creating AJAX 
     ...
    // Create a function that will receive data sent from the server
    ajaxRequest.onreadystatechange = function (){
        if(ajaxRequest.readyState == 4){
            //success code
            ======>Here i want to set variable <=====
            MyVariable='MyContent';
        }
    }
    //Retrieving page
     ....
}

function popup(){
    ajaxFunction();
    alert(MyVariable);
}

Answer 2

No, because MyVariable is scoped to the function. To make it visible to popup(), it must be scoped where both the event handler function and popup() can see it, like Jenp recommends.

Answer 3

Pass the variable to the popup() function:

var MyVariable;    
function ajaxFunction(){
    //creating AJAX 
     ...
    // Create a function that will receive data sent from the server
    ajaxRequest.onreadystatechange = function (){
        if(ajaxRequest.readyState == 4){
            //success code
            ======>Here i want to set variable <=====
            MyVariable='MyContent';
            popup(MyVariable);
        }
    }
    //Retrieving page
     ....
}

function popup(x){
    ajaxFunction();
    alert(x);
}

Answer 4

The following code assumes that the ajax-request is synchronous:

function popup(){
    ajaxFunction();
    alert(MyVariable);
}

But since synchronous requests are blocking the browser you should in almost all cases use asynchronous calls (If I remember correctly onreadystatechange should not be called on synchronous request but different browsers behaves differently)

What you could do is:

function ajaxFunction(callback){
    //creating AJAX 
     ...
    // Create a function that will receive data sent from the server
    ajaxRequest.onreadystatechange = function (){
        if(ajaxRequest.readyState == 4){
            //success code
            callback('MyContent')
        }
    }
    //Retrieving page
     ....
}

function popup() {
  ajaxFunction(function(MyVariable){alert(MyVariable););
}

Answer 5

This may complicate your problem so feel free to interject, but using a third party Javascript library may help ease your burden slightly (as the commenter some mentioned). Prototype and JQuery both have ways of dealing with scope, such as the bind function in Prototype. Also, you won't have to write your own Ajax request code although I commend you for digging in and seeing how it works! Prototype classes can help with scope issues like you've described. You may want to refactor in order to use asynchronous Ajax requests though so that the browser doesn't have to wait as is the case with how you've written it. The following will popup your alert message and set the variable appropriately, although I haven't tested it for errors. It shows the basic concept though.

var TestClass = Class.create();
TestClass.prototype = {

    MyVariable: null,
    AjaxURL: "http://yourajaxurl.com/something.asmx",
    DoAjaxCall: function() {
          new Ajax.Request(this.AjaxURL, 
              method: 'get', 
              onSuccess: this.AjaxCallback.bind(this),
              onFailure: this.DoSomethingSmart.bind(this));
    },

    AjaxCallback: function(returnVal) {
          this.MyVariable = returnVal.responseText;   //ResponseText or whatever you need from the request...
          this.Popup(this.MyVariable);
    },

    DoSomethingSmart: function() {
          //Something smart
    },

    Popup: function(message) {
          alert(message);
    }

};

var TestClassInstance = new TestClass();
TestClassInstance.DoAjaxCall();

Answer 6

some's comments are correct... this has nothing to do with variable scoping, and everything to do with the fact that the inner function (the 'onreadystatechange' function) setting the value of MyVariable will not have been executed by the time that the alert() happens... so the alert will always be empty.

The inner function doesn't get executed synchronously (ie, right away), but is deferred and executed later, when the request returns, which is long after the alert() has been executed. The only solution to this is to defer the alert until after the request finishes.

But regardless of all this, the inner function can set variables outside its scope, as the other posts mention. But your problem is more about execution order than it is about variable scope.