javascript - Ajax and readyState - Stack Overflow

admin管理员组

文章数量:1420907

I am trying to update my ajax request function to show the individual states of the response.

However all I get after I send the request is readyState = 1 and then it jumps directly to readyState = 4 and I get the full response from the server.

Why am I not getting readyStates 2 and 3?

When I experimented with native browser, e.g.

xmlhttp2 = new XMLHttpRequest()

Sending the same requests gets me readyStates 1, 2, 3, and 4 in my callback:

xmlhttp2.onreadystatechange

But with the JQuery ajax helper function does not. Why is this occuring?

Here is my code:

var jqXHR = $.ajax(
{
    data: requestForm, //my json request
    type: req_type, // could be post or get
    url: script, // php script
    async: true,
    success: function(response,textStatus, xhr) 
    {
          renderIt(response);
    },

    error: function( xhr, textStatus, errorThrown )
    {
        var errText = "<b>Error "+xhr.status+" : "+xhr.reponseText+" , "+textStatus+", "+errorThrown+" </b>";
        $('#'+div).append(errText);
    }
});

jqXHR.fail(function( data, textStatus, jqXHR ) 
{
   var errText = "<b>Error "+jqXHR.status+" : "+jqXHR.reponseText+" , "+textStatus+", "+" </b>";
   $('#'+div).html(errText);
});

switch(jqXHR.readyState) 
{
case 1:
    $('#'+div).html("\n<center> Connected to Server...<br/> <img src='images/loading.gif' height=30 width=30></center>\n");
    break;
case 2:
    $('#'+div).html("\n<center> Request Recieved...<br/> <img src='images/loading.gif' height=30 width=30></center>\n");
    break;
case 3:
    $('#'+div).html("\n<center>  Receiving Responses.....<br/> <img src='images/loading.gif' height=30 width=30></center>\n");
    $('#'+div).append(xhr.responseText);
    break;
default:
    $('#'+div).html("\n<center>  Awaiting Results.."+jqXHR.readyState+"<br/> <img src='images/loading.gif' height=30 width=30></center>\n");
    break;                                    
 } 

I am trying to update my ajax request function to show the individual states of the response.

However all I get after I send the request is readyState = 1 and then it jumps directly to readyState = 4 and I get the full response from the server.

Why am I not getting readyStates 2 and 3?

When I experimented with native browser, e.g.

xmlhttp2 = new XMLHttpRequest()

Sending the same requests gets me readyStates 1, 2, 3, and 4 in my callback:

xmlhttp2.onreadystatechange

But with the JQuery ajax helper function does not. Why is this occuring?

Here is my code:

var jqXHR = $.ajax(
{
    data: requestForm, //my json request
    type: req_type, // could be post or get
    url: script, // php script
    async: true,
    success: function(response,textStatus, xhr) 
    {
          renderIt(response);
    },

    error: function( xhr, textStatus, errorThrown )
    {
        var errText = "<b>Error "+xhr.status+" : "+xhr.reponseText+" , "+textStatus+", "+errorThrown+" </b>";
        $('#'+div).append(errText);
    }
});

jqXHR.fail(function( data, textStatus, jqXHR ) 
{
   var errText = "<b>Error "+jqXHR.status+" : "+jqXHR.reponseText+" , "+textStatus+", "+" </b>";
   $('#'+div).html(errText);
});

switch(jqXHR.readyState) 
{
case 1:
    $('#'+div).html("\n<center> Connected to Server...<br/> <img src='images/loading.gif' height=30 width=30></center>\n");
    break;
case 2:
    $('#'+div).html("\n<center> Request Recieved...<br/> <img src='images/loading.gif' height=30 width=30></center>\n");
    break;
case 3:
    $('#'+div).html("\n<center>  Receiving Responses.....<br/> <img src='images/loading.gif' height=30 width=30></center>\n");
    $('#'+div).append(xhr.responseText);
    break;
default:
    $('#'+div).html("\n<center>  Awaiting Results.."+jqXHR.readyState+"<br/> <img src='images/loading.gif' height=30 width=30></center>\n");
    break;                                    
 } 

• javascript
• jquery
• ajax
• xmlhttprequest

Share Improve this question Follow edited Oct 11, 2013 at 18:08 Dauh Fhauc 1411111 bronze badges asked Oct 11, 2013 at 17:55 seedhomseedhom 34922 gold badges66 silver badges1919 bronze badges 8

• You realize that switch statement only executes once, right? – Kevin B Commented Oct 11, 2013 at 18:01
• You are right! How do I bind the switch code to be triggered by a readyState change? – seedhom Commented Oct 11, 2013 at 18:12
• use the readystatechange event? Note however that requires not using jQuery's ajax methods. – Kevin B Commented Oct 11, 2013 at 18:12
• There are ways of doing it using jQuery, but it's a hack at best. you would need to supply a callback to the xhr option that returns an xhr, then bind to the onreadystatechange event on that xhr before you returned it. – Kevin B Commented Oct 11, 2013 at 18:15
• I could be wrong, but I thought that .onreadystatechange() is not available for jqXHR object based on this doc api.jquery./jQuery.ajax – seedhom Commented Oct 11, 2013 at 18:19

 |  Show 3 more ments

1 Answer 1

Sorted by: Reset to default 3

You only get 1 and 4 in jQuery because its success callback only fires once the ajax request pletes, and it does not expose a callback for the readystatechange event.

So, if for some reason you need to be able to do some processing on this event, you will need to use XMLHttpRequest directly.

本文标签： javascriptAjax and readyStateStack Overflow