Jquery工做經常使用實例--ajaxStart與ajaxStop(ajaxComplete)

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 });