jQuery AJAX Events Complete Guide for Beginners and Experts

Whenever an AJAX call is made, jQuery AJAX Events are triggered throughout the request’s lifecycle. These events let developers hook into different stages of the request to display custom messages to users, handle errors gracefully, or trigger additional logic like loading indicators and logging.

• 1. ajaxStart()
• 2. ajaxSend()
• 3. ajaxSuccess()
• 4. ajaxComplete()
• 5. ajaxStop()
• 6. ajaxError()

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

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.

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

ajaxSuccess()

The ajaxSuccess() event fires only when an AJAX request succeeds (HTTP status in the 200 range and no errors thrown).

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

ajaxComplete()

The ajaxComplete() event fires after every AJAX request finishes, regardless of whether it succeeded or failed.

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

ajaxStop()

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

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

ajaxError()

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

$(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. Here I have 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.

Check the below image which explains the full process:

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. Since this is presumably the first AJAX call and it succeeds #data ends up with:

Triggered ajaxStart Event.
Triggered ajaxSend Event.
Welcome
Triggered ajaxSuccess Event.
Triggered ajaxComplete Event.
Triggered ajaxStop Event.

Clicking #submitError (calls result.aspx/welcome1, which doesn’t exist). This request fails (404/500), and no local error callback is defined in the code — only success is set, so nothing runs there. #data gets:

Triggered ajaxStart Event.
Triggered ajaxSend Event.
Triggered ajaxError Event.
Triggered ajaxComplete Event.
Triggered ajaxStop Event.

Want to run the codes in your PC then simply download these codes:

DOWNLOAD

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

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

• 1. jQuery AJAX
• 2. jQuery Load
• 2. jQuery Post
• 2. jQuery Get