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

• 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

1 Answer 1

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.