Computers & ProgrammingFrontend DevelopmentjQuery

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.

MethodDescription
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())
ParameterDescription
functionSpecifies 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))
ParameterDescription
eventEvent object
XMLHttpRequestXMLHttpRequest object
ajaxOptionsOptions 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())
ParameterDescription
functionSpecifies 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))
ParameterDescription
eventEvent object
XMLHttpRequestXMLHttpRequest object
ajaxOptionsOptions 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))
ParameterDescription
eventEvent object
XMLHttpRequestXMLHttpRequest object
ajaxOptionsOptions 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))
ParameterDescription
eventEvent object
XMLHttpRequestXMLHttpRequest object
ajaxOptionsOptions used in the Ajax request
thrownErrorContains 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");
});

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top