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 + '

Here is the full example

<html xmlns="" >
<head runat="server">
    <title>Ajax Handlers</title>
<script type="text/javascript" src="JavaScript/jquery-1.7.2.js"></script>
        $(document).ready(function() {
            // Get HTML Response data from the Server
            $('#btnErrorHandler').click(function(event) {
                    url: "UnknownPage.html",
                    cache: false,
                    dataType: "html",
                    success: function(result) {
               // AjaxComplete Handler
               $("#divAjaxComplete").ajaxComplete(function(objEvent, objHttp,  objSettings)   {
                var msg = '';
                msg += 'readyState: ' + objHttp.readyState + '
    <form id="AjaxHandlers" runat="server">
        <table border="1">
            <tr valign="middle">
                        Text="Error Handler" />
                <td align="center">
                    <br /><div id="divHTML"></div> 
            <tr valign="middle">
                    AjaxComplete Handler:
                <td align="left">
                    <br />
                    <div id="divErrorLog"

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.

successful request the properties will return.

Status: 200
statusText: OK

Related Post

jquery ajax status
jquery ajax status example
jquery ajax readyState
jquery ajax readyState example
jquery ajax caching
jquery ajax caching example
jquery ajax async
jquery ajax async example
jquery ajax authentication
jquery ajax authentication example

Search Flipkart Products:

No comments: