jQuery AJAX Events Complete Guide for Beginners and Experts

jQuery AJAX Events Complete Guide for Beginners and Experts

When there is an AJAX call the jQuery AJAX Events are fired during the life cycle of the AJAX call. We can use these events to show custom message or do other operations.

There are 6 different jQuery AJAX Events:
  • 1. ajaxStart()
  • 2. ajaxSend()
  • 3. ajaxSuccess()
  • 4. ajaxComplete()
  • 5. ajaxStop()
  • 6. ajaxError()


Note: All the AJAX Events are attached to the document.

Taking a look on these jQuery AJAX Events

ajaxStart()

The ajaxStart() event is fired whenever an AJAX request begins.

$(document).ajaxStart( function(){} )

ajaxSend()

The ajaxSend() event is fired before an AJAX request is sent.
Syntax

$(document).ajaxSend( function(function (event, jqxhr, settings){} )

ajaxSuccess()

The ajaxSuccess() event is fired when an AJAX request completes successfully.

Syntax

$(document).ajaxSuccess ( function(event, jqxhr, settings){} )

ajaxComplete()

The ajaxComplete () event is fired when an AJAX request completes.

Syntax

$(document).ajaxComplete ( function(event, jqxhr, settings){} )

ajaxStop()

The ajaxStop() event is fired when all AJAX requests have completed.

Syntax

$(document).ajaxStop ( function(){} )

ajaxError()

The ajaxError() event is fired when an error is encountered during AJAX call.

Syntax

$(document).ajaxError ( function(event, jqxhr, settings, thrownError){} )

Note: The “throwError” parameter provides the cause of the error.

Example of jQuery AJAX Events

Let us create an example of jQuery AJAX Events. There is an HTML Page that has 2 buttons.

The first button calls a C# function on an .ASPX page using jQuery AJAX method while the second button calls a Non-Existing C# function on the .ASPX page.

Obviously the second button will generate an AJAX error.

HTML Page Code:

<button id="submit">Call a C# Function</button> 
<button id="submitError">Call a Non-Existing C# Function To Generate Error</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $("#reset").click(function (e) {
            $("#dbData").html("")
        });

        $(document).ajaxStart(function () {
            $("#data").html("Triggered ajaxStart Event.<br/>");
        });

        $(document).ajaxSend(function (event, jqxhr, settings) {
            $("#data").append("Triggered ajaxSend Event.<br/>");
        });

        $(document).ajaxComplete(function (event, jqxhr, settings) {
            $("#data").append("Triggered ajaxComplete Event.<br/>");
        });

        $(document).ajaxStop(function () {
            $("#data").append("Triggered ajaxStop Event.<br/>");
        });

        $(document).ajaxSuccess(function (event, jqxhr, settings) {
            $("#data").append("Triggered ajaxSuccess Event.<br/>");
        });

        $(document).ajaxError(function (event, jqxhr, settings, thrownError) {
            $("#data").append("Triggered ajaxError Event.<br/>");
        });

        $("#submit").click(function (e) {
            $.ajax({
                type: "POST",
                url: "result.aspx/welcome",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (result, status, xhr) {
                    $("#data").append(result.d);
                },
            });
        });

        $("#submitError").click(function (e) {
            $.ajax({
                type: "POST",
                url: "result.aspx/welcome1",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (result, status, xhr) {
                    $("#data").append(result.d);
                },
            });
        });
    });
</script>

On clicking the button you can see in which order these Events are called(Click the Demo Link below).

You can also use .ajaxStart() to show a loading image and .ajaxStop() to hide the loading image during AJAX calls.

DEMO DOWNLOAD

☺ The jQuery AJAX Events can be used with the following AJAX methods –

Share this article -

yogihosting

ABOUT THE AUTHOR

This article has been written by the Technical Staff of YogiHosting. Check out other articles on “WordPress, SEO, jQuery, HTML” and more.