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("
<center> Connected to Server...<br/> <img src='images/loading.gif' height=30 width=30></center>
");
break;
case 2:
$('#'+div).html("
<center> Request Recieved...<br/> <img src='images/loading.gif' height=30 width=30></center>
");
break;
case 3:
$('#'+div).html("
<center> Receiving Responses.....<br/> <img src='images/loading.gif' height=30 width=30></center>
");
$('#'+div).append(xhr.responseText);
break;
default:
$('#'+div).html("
<center> Awaiting Results.."+jqXHR.readyState+"<br/> <img src='images/loading.gif' height=30 width=30></center>
");
break;
}
You only get 1 and 4 in jQuery because its success callback only fires once the ajax request completes, 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.