Did you find this useful?
Socialize it today.


jQuery Ajax Event Handlers

Wednesday, July 18, 2012

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 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");
    });


click here
Click on the icon to execute jQuery Ajax!
loading


Please help us spread the word by socializing it today!

email contact us

Did you find something wrong with the information on this page? Please take a moment to report it to us so that we can continue to improve the quality of the information on this site. Click here to report an issue with this page.



Recommended Books & Training Resources

HTML CSS and JavaScript Editor JavaScript and jQuery: The Missing Manual Professional jQuery