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

Question

Is it possible to retrieve variable set in onreadystatechange function from outside the function?
--edit--
Regarding execution of functions:
If its possible i would like to execute ajaxFunction() with one click
and then popup() with next click, or somehow wait for ajax function to end and then call for alert box

In pseudocode:

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 <=====
            var MyVariable='MyContent';
        }
    }
    //Retrieving page
    ....
}

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

score 5 · Accepted Answer · answered Nov 14 '08 at 14:49

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

You should also test the ajaxRequest.status for 200 to make sure that the document was retrieved and that you didn't get a 404, 5xx or some other error. (You should probably use some kind of framework for your ajax-requests that will take care of all that for you) — some, Nov 14 '08 at 14:55

score 1 · Answer 2 · answered Nov 27 '08 at 17:14

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.

score 0 · Answer 3 · edited Nov 14 '08 at 14:36

0

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

edited Nov 14 '08 at 14:36

sblundy

60,628
22
121
123

answered Nov 14 '08 at 14:28

Phil Jenkins

4,396
1
27
22

Unless the request is synchronous it will not work (and if it is synchronous onreadystatechange should not be called, IIRC) – some Nov 14 '08 at 14:40
You are correct, I should have read the question more clearly! – Phil Jenkins Nov 14 '08 at 14:48

score 0 · Answer 4 · edited May 23 '17 at 11:49

0

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.

edited May 23 '17 at 11:49

Community

1
1

answered Nov 14 '08 at 14:38

sblundy

60,628
22
121
123

score 0 · Answer 5 · answered Nov 14 '08 at 14:46

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

popup is calling ajaxFunction who is calling popup who is calling ajaxFunction who is..... Error: stack overflow — some, Nov 14 '08 at 14:50

score 0 · Answer 6 · answered Nov 14 '08 at 15:43

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

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

6 Answers6

Linked