Ajax onreadystatechange function readyState

Question

I have a script on my page that receives raw JSON data for an image back from Flickr. I want to use readyState to provide live feedback as it's taking place.

What my current code is able to do is check that the readyState is 4 and the status is 200. When this is true it adds the raw JSON data to the page.

Code:

function sendRequest (request) {

   //Request is the URL string to flickr containings tags entered by the user.

    x = new XMLHttpRequest();
    x.open("GET", request,false);
    x.send(null);



                if (x.readyState==4 && x.status==200)
                {
                document.getElementById("resultsContainer").innerHTML="Raw JSON Data: <br>"+x.responseText+"<br><br>";
                } 


}

As you can see it adds the value received back to the resultsContainer div. I tried to add feedback in the same div like this:

if(x.readyState==3){
document.getElementById("resultsContainer").innerHTML="Processing Request";
}

But it has no effect. I am wondering why it successfully recognises the ready state 4, but not three?

I understand there is an onreadystatechange function and tried to use it but it never executed any of the code, i.e didn't work.

How can I perform an action while the request is happening (readyState == 3) ?

EDIT:

CURRENT CODE:

function sendRequest (request) {

    x = new XMLHttpRequest();
    x.open("GET", request,true);
    x.send();

    x.onreadystatechange = function () {

        if (x.readyState==4 && x.status==200){
            document.getElementById("resultsContainer").innerHTML="success <br>"+x.responseText;
        } 

        if(x.readyState==3){
            document.getElementById("getIms").value="Processing";
        }

    }



}

The element getIms' value changes to processing only when the value is returned and added to the results container.

Answer 1

You should change your code to

x.open("GET", request, true);
x.onreadystatechange = function()
{
    //Your code here to handle readyState==4 and readyState==3
    if (x.readyState==4 && x.status==200)
    {
        document.getElementById("resultsContainer").innerHTML="Raw JSON Data: <br>"+x.responseText+"<br><br>";
    }
    else if (x.readyState==2)
    {
        document.getElementById("resultsContainer").innerHTML="Processing Request";
    }
}
x.send();

This is because the 'false' keyword in x.open states that it should work synchronous, that is: it send the request, then waits until your browser gets a response (readyState == 4) and then it runs the rest of the code.

The change says that x.open must be asynchronous and you also have to create an event handler, it's a function that will be executed every time readyState changes.

You should place the code that should be executed whilst the request is being processed in an else-statement. The reason it isn't doing anything on readyState=3 is because readyState=3 means that a part of the data has already been received, but if the amount of data is very small, this state will be true for a very limited amount of time. ReadyState=2 is true at the moment that your request has been send.