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.

Uh, do you have a `onreadystatechange` event listener for that, or is this the way it's actually written ? — adeneo, Apr 26 '14 at 19:05
This is the way it's written. When I add the x.onreadystatechange = function () { // and put the if statements in here they don't execute} — Anon Omus, Apr 26 '14 at 19:07

Seeseemelk · Answer 1 · 2014-04-27T08:36:52.937

3

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.

edited Apr 27 '14 at 08:36

answered Apr 26 '14 at 19:12

Seeseemelk

136
5

I made your suggested changes. And the code that handles readyState 4 runs. but the condition if (x.readyState ==3) still runs at the same time as - if (x.readyState ==4 && x.status ==200) – Anon Omus Apr 26 '14 at 19:32
Oh I see, I changed it to 2, and still couldn't see the change. I had to modify my url request to 100 results (images from Flickr) to even see the desire change for a split second. Is there any way to change the value from as soon as the request is sent. I need to indicate to the user something is happening even for a small amount of data. – Anon Omus Apr 26 '14 at 19:59
@AnonOmus You could try changing the 'else if (x.readyState==2)' to 'else' and see if that works – Seeseemelk Apr 26 '14 at 20:04
I tried it and it still was a very brief even with 100 sets of JSON data returned. The strange thing is when I hit enter nothing happens for about a second, then it briefly changes to processing before the results are displayed. – Anon Omus Apr 26 '14 at 20:06
I made a workaround. Simply changing the value of the search button as soon as it's clicked. Then if the response comes back 400, reverting it back. – Anon Omus Apr 26 '14 at 20:08
@AnonOMus I was wondering why it still wash't working. I'm pretty sure it should work as excepted now. (I moved the x.send();) – Seeseemelk Apr 27 '14 at 08:37

Ajax onreadystatechange function readyState

1 Answers1