Common examples of jquery work--ajaxstart and Ajaxstop (Ajaxcomplete)

In jquery, the Ajaxstart () method is called when an AJAX request is started, and there are no other incomplete AJAX requests. Similarly, the Ajaxstop () method is called when all AJAX requests are complete. The parameters of these methods are a function that will be called when the event occurs.

Each step of using these methods is to get a reference to a page element. You can then invoke the Ajaxstart () and Ajaxstop () methods on this element.

Use syntax:

("#loading"). Ajaxstart (function () {$ (this). Show ();//callback}): When an AJAX request starts, it displays the contents of the id "loading";

("#loading"). Ajaxstop (function () {$ (this). Hide ();//call}): When an AJAX request ends, the contents of the id "loading" are hidden;

In the process of development, I usually use them to do the page waiting for the progress of the picture display, which is loaded with Ajax and can not be loaded quickly (sometimes the page is not shown in a slow half a day), Then will automatically call Ajaxstart show a wait for the picture out (I will generally use wbox do popup a transparent layer), and so on the page all content Ajax loading complete, and then close the layer;

To facilitate your understanding, I would like to give you a simple example that I hope will help you:

First put the need to say, jquery library, a picture (waiting for the progress of the can, many online), OK, you can start:

The contents of the index.php file are as follows:

<script src= "Jquery.js" ></script>
<a href= "#" id= "O" >o</a><br/>
<a href= "#" id= "P" >p</a><br/>
<a href= "#" id= "Q" >q</a><br/>
<div id= "Loading" style= "Display:none;" ></div>
<div id= "Content" ></div>

<script>
$ (document). Ready (function () {

$ ("#loading"). Ajaxstart (function () {
$ (this). Show ();
}). Ajaxstop (function () {//ajaxstop change to Ajaxcomplete is the same
$ (this). Hide ();
});

$ ("#o"). Click (function () {
$.post ("For.php?id=o", function (data) {
$ ("#content"). HTML (data);
});
})

$ ("#p"). Click (function () {
$.post ("For.php?id=p", function (data) {
$ ("#content"). HTML (data);
});
})

$ ("#q"). Click (function () {
$.post ("For.php?id=q", function (data) {
$ ("#content"). HTML (data);
});
})

})
</script>

for.php content is as follows:

<?php
if ($_get[' id ')
{
for ($i =0; $i <3; $i + +)
{
Sleep (4);//For example we usually open the page very slowly, using the sleep function, so that Ajax loading time to wait 12 seconds;
echo $_get[' id '];
}
}

?>

OK, put the two files and the jquery library, the picture in your root directory under the same directory, access to index.php, point O or P or Q, you will see the wait progress picture, loading completed in <a> The following layer shows the contents of the Ajax loading OOO or PPP or QQQ and closes the picture waiting to load, detailed everyone can try, with more natural can appreciate the benefits of it, hehe ...

Finally, Ajaxstart and Ajaxstop are both global methods, regardless of where their code is created, and they execute as long as Ajax is executed. If Ajax is also used elsewhere on this page, the global function will do the same because they are global. If you want an AJAX to be unaffected by the global approach, you can set the global parameter to False in the $.ajax (options) method, such as:

$.ajax ({
URL: "Test.html",
Global:false
});