Ajaxstart and ajaxstop

When an Ajax request is started in jquery and no other unfinished Ajax requests exist, the ajaxstart () method is called. Similarly, the ajaxstop () method is called when all Ajax requests are completed. The parameters of these methods are all functions that will be called when an event occurs.

Each step of using these methods is to obtain a reference to a page element. Then you can call the ajaxstart () and ajaxstop () Methods on this element.

Syntax:

("# Loading "). ajaxstart (function () {$ (this ). show (); // callback}): When an Ajax request starts, the content with ID "loading" is displayed;

("# Loading "). ajaxstop (function () {$ (this ). hide (); // call}): When an Ajax request ends, the content with ID "loading" is hidden;

In the process of development, I usually use them to display the page wait progress picture, that is, all loading with Ajax cannot be completed quickly (sometimes the page is not displayed for a long time ), then, ajaxstart will be automatically called to display a waiting image (I usually use wbox to pop up a transparent layer), and close the layer after Ajax loading of all the page content;

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

Let's talk about the jquery library and image (wait for the progress, there are a lot of online resources). OK, you can start:

The content of the index. php file is 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 () {// change ajaxstop to ajaxcomplete.
$ (This). Hide ();
});

$ ("# O"). Click (function (){
$. Post ("For. php? Id = O ", function (data ){
$ ("# Content" pai.html (data );
});
})

$ ("# P"). Click (function (){
$. Post ("For. php? Id = P ", function (data ){
$ ("# Content" pai.html (data );
});
})

$ ("# Q"). Click (function (){
$. Post ("For. php? Id = Q ", function (data ){
$ ("# Content" pai.html (data );
});
})

})
</SCRIPT>

The content of for. php is as follows:

<? PHP
If ($ _ Get ['id'])
{
For ($ I = 0; $ I <3; $ I ++)
{
Sleep (4); // For example, we usually open the page slowly. We use the sleep function to let Ajax wait 12 seconds for loading;
Echo $ _ Get ['id'];
}
}

?>

OK. Put the two files and the jquery library in the same directory under your root directory and access the index. after PHP, click O, P, or Q. You will see the waiting progress picture first, after loading is completed, the following layer of <A> displays the Ajax-loaded content Ooo, PPP, or qqq and closes the image waiting for loading. For details, try it, with more features, you can naturally appreciate its benefits ···

The last thing to note is that both ajaxstart and ajaxstop are global methods. No matter where their code is created, they will execute any Ajax execution. If Ajax is used elsewhere on this page, the global functions are also executed because they are global. If you want to make Ajax independent from the global method, you can set global in the $. Ajax (options) method to false, for example:

$. Ajax ({
URL: "test.html ",
Global: false
});

Ajaxstart and ajaxstop