jquery ajax readyState Example

Wednesday, October 17, 2012

jquery ajax readyState Example

The readyState property holds the status of the XMLHttpRequest, the readyState property does not give any information on the success / failure of the request, but just gives an indication on the progress of the request.

In this post we shall see on how to get the readyState value of an Ajax request from the XMLHttpRequest.

The ajaxComplete event gets fired when any of the Ajax request in the page gets completed, the following script captures the readyState properties of the ajaxComplete event and interpret the status of the request.

// AjaxComplete Handler

$("#divAjaxComplete").ajaxComplete(function(objEvent, objHttp, objSettings) {

var msg = '';

msg += 'readyState: ' + objHttp.readyState + '
';

$("#divAjaxComplete").html(msg);

});

Here is the full example

<html xmlns="http://www.w3.org/1999/xhtml" >

<title>Ajax Handlers</title>

<script

type="text/javascript"

language="javascript">

$(document).ready(function() {

// Get HTML Response data from the Server

$('#btnErrorHandler').click(function(event) {

event.preventDefault();

$.ajax({

url: "UnknownPage.html",

cache: false,

dataType: "html",

success: function(result) {

$("#divHTML").html(result);

}

});

// AjaxComplete Handler

$("#divAjaxComplete").ajaxComplete(function(objEvent, objHttp, objSettings) {

var msg = '';

msg += 'readyState: ' + objHttp.readyState + '
';

$("#divErrorLog").html(msg);

});
});

});

</script>

</head>

<body>

<tr>

<td><b>Action</b></td>

<td><b>Response</b></td>

</tr>

<td>

<asp:Button

ID="btnErrorHandler"

runat="server"

Text="Error Handler" />

</td>

</td>

</tr>

<td>

AjaxComplete Handler:

</td>

<br />

<div id="divErrorLog"

style="color:Red;">

</div>

</td>

</tr>

</table>

</form>

</body>

</html>

In this example we are trying to call a serer page which does not exist, though the request fails, the readyState will be returned as 4 indicating that the request has completed processing.