Need Help Understanding Ajax Function

Question

So I just finished writing my first Ajax function. I did it all from a google tutorial and w3schools and it's finally working. The only problem is I don't fully understand the logic of what is happening and am looking for an explanation!

Here is my full code

function loadPlayer(id)
{
    var xmlhttp;

    if (window.XMLHttpRequest)
        xmlhttp=new XMLHttpRequest();
    else if(window.ActiveXObject)
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

    xmlhttp.onreadystatechange=function() 
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
            document.getElementById("newPlayer").innerHTML=xmlhttp.responseText;
    };

    xmlhttp.open("GET","http://localhost:8084/gmustudent/players?id=" + id,true);
    xmlhttp.send();
}

My main question is about the order that I wrote this code as it pertains to each statement. I am confused because within the onreadystatechange function I am grabbing the response text and putting it in the newPlayer div. However, it is not until after this statement that I actual get the data from the url asynchronously.

So I'm confused because I do not understand how you can put the response text in the div, if you haven't gotten it yet. I see that it works, I just don't understand why. So if anyone could explain what is going on here in simple terms I would really appreciate it. Especially as it pertains to the order that I am writing my statements and what each statement is actually doing. Thank you so much!

Answer 1

this:

xmlhttp.onreadystatechange=function() 
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
            document.getElementById("newPlayer").innerHTML=xmlhttp.responseText;
    };

is an event handler which means that it gets executed when an event is fired. In this case its when the state changes of the request you made. The actual flow through the code is:

1. You attach that event handler in the code above
2. You make the actual request
3. That event onreadystatechange gets fired repeatedly as the request is being processed (as the state changes)
4. When the request is ready and is OK (that if block), it adds the response text to the div.

So, you can see that you attach the event callback in #1, and then the code you care about finally gets executed later at #4.

Answer 2

I've added some comments in your code about what's going on in the various parts.

function loadPlayer(id)
{
    var xmlhttp;

    // This if/else block is trying to get the best request object for you, based on browser(ish).
    if (window.XMLHttpRequest)
        xmlhttp=new XMLHttpRequest();
    else if(window.ActiveXObject)
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

    // This is declaring a function to run when the state changes on the ajax request.  Note that just because you're creating the function here, does not mean it is running yet.  It will only run when the ajax request triggers it.
    xmlhttp.onreadystatechange=function() 
    {
        // This is checking to see if it is finished. If it isn't finished, you don't have responseText to use.
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
            // Now that the request is actually back, we can take the text from the response and use it.
            document.getElementById("newPlayer").innerHTML=xmlhttp.responseText;
    };

    xmlhttp.open("GET","http://localhost:8084/gmustudent/players?id=" + id,true);
    // Okay, now we're running the request.
    xmlhttp.send();
}

If you wanted, you could see the function you made for onreadystatechange getting called by just placing a console.log(xmlhttp.readyState); statement on the first line of the function, above the if block.

Answer 3

When you assign a function to the .onreadystatechange property of an XHR Object, you're assigning a such called callback function. Since the name already tells us, that function is going to get called later on, from another process or another part of the application.

In this case, it's getting called on several Ajax events. For instance, if the request is going to setup, if data is received and when the whole request finishes. That is why you check there if the readyState equals 4 and the status 200.

So the order of code is not important there, the function does not get executed immediately, it's just being referenced and called later on.