javascript - Ajax onreadystatechange function readyState - Stack Overflow

admin管理员组

文章数量:1332383

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.

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.

• javascript
• ajax
• readystate
• onreadystatechange

Share Improve this question Follow edited Apr 26, 2014 at 19:39 Anon Omus asked Apr 26, 2014 at 19:02 Anon OmusAnon Omus 38144 gold badges1212 silver badges2525 bronze badges 2

• Uh, do you have a onreadystatechange event listener for that, or is this the way it's actually written ? – adeneo Commented Apr 26, 2014 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 Commented Apr 26, 2014 at 19:07

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 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.

本文标签： javascriptAjax onreadystatechange function readyStateStack Overflow