Wednesday, October 17, 2012

jquery ajax status Example

JQuery offers 2 properties status and statusText, which can be used to interpret the status of an Ajax request. These properties are available in the XMLHttpRequest object which is returned with the ajaxComplete, ajaxSuccess & ajaxError event handlers.

In this post we shall see on how to user these properties and interpret the status of the Ajax Request.

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

// AjaxComplete Handler
$("#divAjaxComplete").ajaxComplete(function(objEvent, objHttp, objSettings) {
    var msg = '';
    msg += 'Status: ' + objHttp.status + '
'
;
    msg += 'statusText: ' + objHttp.statusText + '
'
;
    $("#divAjaxComplete").html(msg);
});

Here is the full example

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Ajax Handlers</title>
<script type="text/javascript" src="JavaScript/jquery-1.7.2.js"></script>
    <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 += 'Status: ' + objHttp.status + '
'
;
                msg += 'statusText: ' + objHttp.statusText + '
'
;
                $("#divErrorLog").html(msg);
               });
            });
        });
    </script>                 
</head>
<body>
    <form id="AjaxHandlers" runat="server">
        <table border="1">
            <tr>
                <td><b>Action</b></td>
                <td><b>Response</b></td>
            </tr>
            <tr valign="middle">
                <td>
                    <asp:Button
                        ID="btnErrorHandler"
                        runat="server"
                        Text="Error Handler" />
                </td>
                <td align="center">
                    <br /><div id="divHTML"></div> 
                </td>
            </tr>
            <tr valign="middle">
                <td>
                    AjaxComplete Handler:
                </td>
                <td align="left">
                    <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, hence the following information will be returned by the status and statusText properties.

Status: 404
statusText: Not Found

For a 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:
Flipkart.com

No comments: