Jquery中當一個Ajax請求啟動時,並且沒有其他未完成的Ajax請求時,將調用ajaxStart()方法。同樣,ajaxStop()方法則是在所有Ajax請求都完成時調用。這些方法的參數都是一個函數,這個函數將在事件發生時被調用。
使用這些方法的每一步是獲取一個頁面元素的引用。然后就可以在這個元素上調用ajaxStart()和ajaxStop()方法。
使用語法:
("#loading").ajaxStart(function(){ $(this).show(); //callback }):當一個當Ajax請求開始時將把id為"loading"的內容顯示;
("#loading").ajaxStop(function(){ $(this).hide(); //call }):當一個當Ajax請求結束時將把id為"loading"的內容隱藏;
在開發的過程當中,我一般會用它們來做頁面等待進度圖片的顯示,即所有用ajax加載又不能很快加載完成的(有時頁面很慢半天沒顯示),那么將自動調用ajaxStart顯示一個等待的圖片出來(我一般會用Wbox做彈出一個透明的層),等頁面所有內容ajax加載完成,再關閉該層;
為了便於大家的理解,我舉個簡單的例子,希望對大家有幫助:
先把需要的說一下,jquery庫,圖片一張(等待進度的就可以,網上很多),OK,可以開始了:
index.php文件內容如下:
<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" > <div id="content"></div>
<script>
$(document).ready(function(){
$("#loading").ajaxStart(function(){
$(this).show();
}).ajaxStop(function(){//ajaxStop改為ajaxComplete也是一樣的
$(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內容如下:
<?php
if($_GET['id'])
{
for($i=0;$i<3;$i++)
{
sleep(4);//為了模范我們平時打開頁面很慢,使用sleep函數,讓ajax加載時等待12秒;
echo $_GET['id'];
}
}
?>
OK,把該兩個文件和jquery庫,圖片放於你根目錄下的同一目錄,訪問index.php后,點o或p或q,你先會看到等待進度圖片,加載完成在<a>的下面層顯示ajax加載的內容ooo或ppp或qqq並關閉等待加載的圖片,詳細的大家可以試試,用多了自然能體會到它的好處,呵呵···
最后要提醒的是,ajaxStart與ajaxStop都是全局方法,無論創建他們的代碼放在何處,只要有ajax執行,他們都會執行。如果在此頁面的其他地方也使用了ajax,該全局函數同樣執行,因為他們是全局的。如果想使某個ajax不受全局方法的影響,那么可以在$.ajax(options)方法中,將參數中的global設置為false,如:
$.ajax({
url:"test.html",
global:false
});