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

Answer 1

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.