Jquery工作常用執行個體--ajaxStart與ajaxStop(ajaxComplete)

標籤：style   http   使用   os   io   檔案   for   ar   

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" style="display:none;"><img src="loading.gif" /></div>
<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
});