jQuery ajax - ajaxStop() 方法和jQuery ajax - ajaxStart()

当所有 AJAX 请求完成时，触发一个提示框：

$("div").ajaxStop(function(){
  alert("所有 AJAX 请求已完成");
});

亲自试一试

定义和用法

ajaxStop() 方法在 AJAX 请求结束时执行函数。它是一个 Ajax 事件。

详细说明

无论 Ajax 请求在何时完成 ，jQuery 都会检查是否存在其他 Ajax 请求。如果不存在，则 jQuery 会触发该 ajaxStop 事件。在此时，由 .ajaxStop() 方法注册的任何函数都会被执行。

语法

.ajaxStop(function())

参数	描述
function()	规定当 AJAX 请求完成时运行的函数。

示例

AJAX 请求结束后隐藏信息：

$("#loading").ajaxStop(function(){
  $(this).hide();
});









  
  

   
   
当 AJAX 请求开始时，显示“加载中”的指示：
   
   
$("div").ajaxStart(function(){
  $(this).html("<img src='demo_wait.gif' />");
});

   
   
亲自试一试
  
  
  
  

   
   
定义和用法
   
   
ajaxStart() 方法在 AJAX 请求发送前执行函数。它是一个 Ajax 事件。
   
   
详细说明
   
   
无论在何时发送 Ajax 请求，jQuery 都会检查是否存在其他 Ajax 请求。如果不存在，则 jQuery 会触发该 ajaxStart 事件。在此时，由 .ajaxStart() 方法注册的任何函数都会被执行。
   
   
语法
   
   
.ajaxStart(function())
   
   
参数
描述
function()
规定当
 AJAX 请求开始时运行的函数。
   
   
示例
   
   
AJAX 请求开始时显示信息：
   
   
$("#loading").ajaxStart(function(){
  $(this).show();
});
   
   

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