Modify outside variable from within AJAX function?

Question

I use a AJAX request to get a numerical value from the database. The AJAX function is inside another function that should return the value of the AJAX request. However because the return value from the AJAX request is a local variable inside the xmlhttp.onreadystatechange function it doesn't change the "higher level" temp_return of the return_count function. I can't have the "lower" function return the value and assign it to a variable because it's already defined to xmlhttp.onreadystatechange... How can I change this so that the return_count function will return the correct value instead of 42 (predefined for testing purposes)?

function return_count(ajax_userid,ajax_date,ajax_KT,ajax_KS)
{
    var temp_return = 42;
    xmlhttp.onreadystatechange =
    function()
    {
        if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
        {
            temp_return = xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET", "count.php?userid="+ajax_userid+"&date="+ajax_date+"&KT="+ajax_KT+"&KS="+ajax_KS, true);
    xmlhttp.send();
    return temp_return;
}

Make the ajax request [synchronous](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests), if you don't want to block the page, you need to call the function instead of returning. — Dave Chen, Aug 31 '13 at 22:40
The *A* in *AJAX* stands for **asynchronous**, you can't return a variable from an ajax call, you will need to use it via a callback, a function(normally passed as a parameter of the ajax "major" function) which will have only one parameter(the returned data, in this case `xmlhttp.responseText`) and will be invoked with that param. — Niccolò Campolungo, Aug 31 '13 at 22:41
possible duplicate of [How to return the response from an AJAX call?](http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call) — adeneo, Aug 31 '13 at 22:52
Seems I need to work on my search skills a bit, my first search didn't turn up any results that seemd to be easily applyable to my specific problem. Thanks for pointing me to the other question/answers. — Kodekan, Aug 31 '13 at 23:02

score 1 · Accepted Answer · answered Aug 31 '13 at 23:07

You can do it of 2 ways...

making a callback to you ajax (RECOMENDED)

creating async callback to continue your flow ;D

function return_count(ajax_userid,ajax_date,ajax_KT,ajax_KS, callback)
{   
    var otherCallback;
    var temp_return = 42;
    xmlhttp.onreadystatechange =
    function()
    {
        if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
        {
            temp_return = xmlhttp.responseText;
            if(typeof callback === "function" ) callback(temp_return);
            if(typeof otherCallback === "function" ) otherCallback(temp_return);
        }
    }
    xmlhttp.open("GET", "count.php?userid="+ajax_userid+"&date="+ajax_date+"&KT="+ajax_KT+"&KS="+ajax_KS, true);
    xmlhttp.send();

    return { done: function (callback2){
          otherCallback = callback2;

    } };
}

you can use this way like below...

parameter callback

return_count( userid, date, KT, KS, function (count) {

     alert("returned " + count);

});

or pipe callback

    return_count( userid, date, KT, KS)
    .done( function (count) {

         alert("returned " + count);

     });

making a synchronous ajax

adding the "false" to flag async...

function return_count(ajax_userid,ajax_date,ajax_KT,ajax_KS)
{
    var temp_return = 42;
    xmlhttp.onreadystatechange =
    function()
    {
        if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
        {
            temp_return = xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET", "count.php?userid="+ajax_userid+"&date="+ajax_date+"&KT="+ajax_KT+"&KS="+ajax_KS, false);
    xmlhttp.send();
    return temp_return;
}

but this method lock your UI and is bad to UX.

Modify outside variable from within AJAX function?

1 Answers1