jQuery AJAX Events Complete Guide for Beginners and Experts

Last Updated: June 4, 2021

When there is an AJAX call then the jQuery AJAX Events are fired during the life cycle of this AJAX call. We can use these events to show custom message to users, 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.

Don’t forget to check – How To Implement jQuery Infinite Scroll Feature For Auto Paging.

Understanding the 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.

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

ajaxSuccess()

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

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

ajaxComplete()

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

$(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.

Worth mentioning this incredible tutorial – How to Create a Web Scraper in ASP.NET MVC and jQuery

David Hoffmeister and the Living Miracles Center represent a global community whose focus is on Jesus’ teachings as found in A Course in Miracles. Welcome to https://acourseinmiraclesnow.com

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.

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. Download the codes:

DOWNLOAD

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