jQuery AJAX Event Handlers

JQuery Ajax provides a variety of methods that can be executed when certain events occur. These methods register handlers that are called when certain events, such as initialization or completion, take place for any AJAX request on the web page. In this article, we will cover the most common methods in more detail.

Ajax Methods

The methods listed in the following table are common jQuery Ajax methods that require much less code than standard Ajax.

Method	Description
`ajaxComplete()`	Specifies a function to execute when the Ajax request completes
`ajaxError()`	Specifies a function to execute when the Ajax request completes with an error
`ajaxSend()`	Specifies a function to execute before the Ajax request is sent
`ajaxStart()`	Specifies a function to execute when the first Ajax request begins
`ajaxStop()`	Specifies a function to execute when all Ajax requests have been completed
`ajaxSuccess()`	Specifies a function to execute an Ajax request completes successfully

HTML Example

We will use the following HTML for the examples listed below.

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
              // ... jQuery Code ...
        });
    </script>
</head>
<body>
    <img id="img1" src="go.png" /> ; 
    <div id="div1"> <!-- Some Content --> </div>
</body>
</html>

ajaxStart() Method

The ajaxStart() method specifies a function to be run when an Ajax request starts. A function specified with the ajaxStart() method will run when the request is started.

Syntax

$(selector).ajaxStart(function())

Parameter	Description
`function`	Specifies the function to run when the Ajax request starts

ajaxComplete() Method

The ajaxComplete() method specifies a function to be run when an Ajax request completes. A function specified with the ajaxComplete() method will run when the request is completed, even if the function was not successful.

Syntax

$(selector).ajaxComplete(function(event, XMLHttpRequest, ajaxOptions))

Parameter	Description
`event`	Event object
`XMLHttpRequest`	XMLHttpRequest object
`ajaxOptions`	Options used in the Ajax request

ajaxStop() Method

The ajaxStop() method specifies a function to run when all of the Ajax requests have completed their execution. When an Ajax request completes, jQuery will check to see if there are any other Ajax requests to execute. The function defined with the ajaxStop() method will execute if no other requests are pending.

Syntax

$(selector).ajaxStop(function())

Parameter	Description
`function`	Specifies the function to run when all of the Ajax requests are completed

ajaxSucess() Method

The ajaxSuccess() method specifies a function to be run when an Ajax request is successfully completed.

Syntax

$(selector).ajaxSuccess(function(event, XMLHttpRequest, ajaxOptions))

Parameter	Description
`event`	Event object
`XMLHttpRequest`	XMLHttpRequest object
`ajaxOptions`	Options used in the Ajax request

ajaxSend() Method

The ajaxSend() method specifies a function to execute prior to an Ajax requests being sent to the server.

Syntax

$(selector).ajaxSend(function(event, XMLHttpRequest, ajaxOptions))

Parameter	Description
`event`	Event object
`XMLHttpRequest`	XMLHttpRequest object
`ajaxOptions`	Options used in the Ajax request

ajaxError() Method

The ajaxError() method specifies a function to be executed when an Ajax request fails. In the example below, you can change the source location of the file defined in the load() method to trigger this method.

Syntax

$(selector).ajaxError(function(event, XMLHttpRequest, ajaxOptions, thrownError))

Parameter	Description
`event`	Event object
`XMLHttpRequest`	XMLHttpRequest object
`ajaxOptions`	Options used in the Ajax request
`thrownError`	Contains the JavaScript exception, if it occurred

$("#div1").ajaxStart(function () {
    $("#progress").css("display", "block");
});
$("#div1").ajaxComplete(function () {
    $("#progress").css("display", "none");
});
$("#div1").ajaxStop(function () {
    alert("All Ajax processes have completed.");
});
$("#div1").ajaxSuccess(function () {
    alert("The load method completed successfully.");
});
$("#div1").ajaxSend(function () {
    $(this).html("Loading " + opt.url + ". Please wait...");
});
$("#div1").ajaxError(function () {
    alert("An error occured!");
});
$("#img1").click(function () {
    $("#div1").load("jquery_ajax_load.aspx");
});