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.
HTML Example
We will use the following HTML for the examples listed below.
;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())
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.
$(selector).ajaxComplete(function(event, XMLHttpRequest, ajaxOptions))
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.
$(selector).ajaxStop(function())
ajaxSucess() Method
The ajaxSuccess() method specifies a function to be run when an Ajax request is successfully completed.
$(selector).ajaxSuccess(function(event, XMLHttpRequest, ajaxOptions))
ajaxSend() Method
The ajaxSend() method specifies a function to execute prior to an Ajax requests being sent to the server.
$(selector).ajaxSend(function(event, XMLHttpRequest, ajaxOptions))
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.
$(selector).ajaxError(function(event, XMLHttpRequest, ajaxOptions, thrownError))
$("#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”); });
