Use Global Ajax Event Handler Methods in jQuery

Now a days many ASP.NET applications use jQuery Ajax in one or the other way. jQuery methods such as $.ajax(), $.get() and $.post() are commonly used in such applications. When you make multiple Ajax calls from a single page you may take advantage of the global Ajax event handler methods of jQuery. To that end this article provides a quick reference of various global Ajax configuration methods that can simplify your jQuery code.

As an example you will call the following ASP.NET MVC actions from jQuery code:

public ActionResult GetData()
{
    System.Threading.Thread.Sleep(4000);
    return Json($"Server timestamp : {DateTime.Now}");
}

The GetData() action simply asks the current thread to sleep for 4 seconds and then returns server side date-time stamp to the caller.

To invoke the above action you can use $.ajax() method as shown below:

$.ajax({
    url: "/home/getdata",
    type: "GET",
    dataType: "json",
    success: function (msg) {
        $("#response").html(msg);
    }
});

The success callback simply displays the timestamp returned from the server into a response <div> element. It is also assumed that the page contains an animated GIF image with ID of progress.

  Ok. Now, let's use some global Ajax event handler methods of jQuery to configure things such as progress indicator and error message.

.ajaxSend()

The ajaxSend() method is used to execute some code just before making an Ajax request. You can use this method to display a common progress indicator to all the Ajax requests arising from a page. The following code shows how .ajaxSend() can be used:

$(document).ajaxSend(function () {
    $("#progress").show();
});

As you can see, the ajaxSend() method is called on the document selector and takes a callback function. The callback function is triggered just before making each Ajax request from the page. For example, if a page makes three Ajax requests, the callback function gets executed thrice. In this case the callback function simply shows a progress indicator in the form of an animated GIF.

The following figure shows a sample run of the above code. 

.ajaxComplete()

The ajaxComplete() method is used to execute some code when an Ajax request completes - successfully or with error. You can use this method to hide the progress indicator shown using the ajaxSend() method. The following code shows the usage of this method:

$(document).ajaxComplete(function () {
    $("#progress").hide();
});

Just like ajaxSend(), the ajaxComplete() method is also called on the document selector. In this case the callback function simply hides the progress indicator.

.ajaxStart()

The callbacks registered through the ajaxSend() and ajaxComplete() methods are called for each and every Ajax request being invoked from the page. This is fine when your code makes only one Ajax request at a time. Imagine a case where you have multiple Ajax requests being made at the same time (or within a same time window). If you use ajaxSend() in this case, the show() method will be called even if the progress indicator is already visible from the previous call. You can correct the behavior if you show the progress indicator only when the first ever Ajax request is made. That's where ajaxStart() method comes handy.

$(document).ajaxStart(function () {
    $("#progress").show();
});

When an Ajax request is being sent, jQuery checks whether there are any other pending requests from the page. If there are no pending Ajax requests the ajaxStart() callback is triggered.

.ajaxStop()

The counterpart of ajaxStart() is ajaxStop(). The callback registered through ajaxStop() is called whenever all the Ajax requests complete. When an Ajax request completes jQuery checks whether there are any other pending requests. If there are no pending requests jQuery triggers the ajaxStop() callback. The following code shows its usage:

$(document).ajaxStop(function () {
    $("#progress").hide();
});

.ajaxSuccess()

The ajaxSuccess() method is used to perform some work when an Ajax request completes successfully. Notice the difference between ajaxComplete() and ajaxSuccess(). The ajaxComplete() callback is triggered irrespective of whether an Ajax request was successful or not. The ajaxSuccess(), on the other hand, is called only if an Ajax request is successful.

$(document).ajaxSuccess(function () {
    $("#status").html(
     "The Ajax request was completed successfully!");
});

.ajaxError()

The ajaxError() method is used to perform some work when an Ajax request completes with some error. You may use this method to display error indicator or to do some cleanup.

$(document).ajaxError(function () {
    $("#status").html(
    "There was an error while executing the Ajax request!");
});

Summary

• ajaxSend() triggers a registered callback every time an Ajax request is sent.
• ajaxComplete() triggers a registered callback every time an Ajax request completes.
• ajaxSuccess() triggers a registered callback every time an Ajax request completes successfully.
• ajaxError() triggeres a registered callback every time an Ajax request completes with an error.
• ajaxStart() triggers a registered callback when the first Ajax request begins.
• ajaxStop() triggers a registered callback when all the Ajax requests complete.