AJAX not updating variable

Question

jQuery

I am making an AJAX request that updates the value of a variable (foo) with a response from the server. Here is the code I am using:

//## My variable ##

var foo = "";


//## Send request ##

$.ajax({
    url: "/",
    dataType: "text",
    success: function(response) {
        foo = "New value:" + response;
    },
    error: function() {
        alert('There was a problem with the request.');
    }
});


//## Alert updated variable ##

alert(foo);

The problem is that the value of foo remains an empty string. I know that this is not a problem with the server-side script, since I would either get an error alert or at the very least the string "New value:".

Here is a JSFiddle that demonstrates the problem: http://jsfiddle.net/GGDX7/

Why is the value of foo not changing?

---

Pure JS

I am making an AJAX request that updates the value of a variable (foo) with a response from the server. Here is the code I am using:

//## Compatibility ##

var myRequest;
if (window.XMLHttpRequest) {
    myRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) {
    myRequest = new ActiveXObject("Microsoft.XMLHTTP");
}


//## My variable ##

var foo = "";


//## Response handler ##

myRequest.onreadystatechange = function() {
    if (this.readyState === 4) {
        if (this.status === 200) {
            foo = "New value:" + this.responseText;
        } else {
            alert('There was a problem with the request.');
        }
    }
};


//## Send request ##

myRequest.open('GET', "response.php");
myRequest.send();


//## Alert updated variable ##

alert(foo);

The problem is that the value of foo stays an empty string. I know that this is not a problem with the server-side script, since I would either get an error alert or at the very least the string "New value:".

Here is a JSFiddle that demonstrates the problem: http://jsfiddle.net/wkwjh/

Why is the value of foo not changing?

Answer 1

At the point when you alert the value of foo, the success handler has not yet fired. Since it is the success handler that reassigns the variable, its value remains an empty string.

The timeline of events looks something like this:

1. foo is assigned the empty string
2. AJAX request created and dispatched.
3. The value of foo is alerted. (Note that foo hasn't changed yet)
4. AJAX request completes.
5. foo = "New value:" + this.responseText;

Since we want to alert the value of foo after it has changed, the solution is to put the alert in the success callback.

Now it will be executed after the AJAX response is received.