In AJAX how to extract a variable from inside onreadystatechange = function ()

Question

Is it possible to get the variable set in the onreadystatechange function outside the function?
--edit--
Regarding the performance of functions:
If possible, I would like to execute ajaxFunction () with one click
and then popup () with the next click or somehow wait for the ajax function to complete and then call the warning window

In pseudo code:

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

Answer 1

The following code assumes that the ajax request is synchronous:

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

But since synchronous requests block the browser, you should use asynchronous calls in almost all cases (if I remember correctly, onreadystatechange should not be called by a synchronous request, and different browsers behave differently)

What can you do:

 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 2

some comments are true ... this has nothing to do with the scope of the variables, and all that is connected with the fact that the internal function (onreadystatechange function) setting the value MyVariable will not be executed by the time that the warning () occurs ... therefore, the warning will always be empty.

The internal function does not start synchronously (i.e. immediately), but is delayed and executed later when the request returns, which is a long time after the execution of alert (). The only solution to this is to delay the alert until the request is completed.

But regardless of all this, an internal function can set variables outside its scope, as other posts mention. But your problem is more likely with the execution order than with a variable scope.

Answer 3

Why not change the scope of MyVariable outside 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 4

No, because MyVariable bound to a function. To make it visible to popup() , it must be limited to the scope where both the event handler function and popup() can see it, for example Jenp .

Answer 5

Pass the variable to popup ():

 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 6

This can complicate your problem, so feel free to embed, but using a third-party Javascript library may ease your burden a bit (as the commentator noted). Prototype and jQuery have scope methods, such as the bind function in Prototype. Plus, you don’t have to write your own Ajax request code, although I recommend you dig in and see how it works! Prototype classes can help with area problems as you described. You may want to refactor to use asynchronous Ajax requests, although the browser does not need to wait, as it was with the way you wrote it. The following will display your warning message and set the variable accordingly, although I have not checked it for errors. It shows the basic concept.

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