jQuery全局Ajax事件处理器-阿里云开发者社区

jQuery全局Ajax事件处理器

2016-05-20 1730

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介：

1. .ajaxComplete( handler(event, XMLHttpRequest, ajaxOptions) )

每当一个Ajax请求完成，jQuery就会触发ajaxComplete事件，在这个时间点所有处理函数会使用.ajaxComplete()方法注册并执行。

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#txt").ajaxStart(function(){
    $("#wait").css("display","block");
  });
  $("#txt").ajaxComplete(function(){
    $("#wait").css("display","none");
  });
  $("button").click(function(){
    $("#txt").load("/example/jquery/demo_ajax_load.asp");
  });
});
</script>
</head>

<body>

<div id="txt"><h2>通过 AJAX 改变文本</h2></div>
<button>改变内容</button>

</body>
</html>

效果前:

效果后:

2. .ajaxError(function(event,xhr,options,exc))

ajaxError() 方法在 AJAX 请求发生错误时执行函数。它是一个 Ajax 事件。

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("div").ajaxError(function(){
    alert("发生错误！");
  });
  $("button").click(function(){
    $("div").load("wrongfile.txt");
  });
});
</script>
</head>

<body>

<div id="txt"><h2>通过 AJAX 改变文本</h2></div>
<button>改变内容</button>

</body>
</html>

效果前：

效果后：

3. .ajaxSend([function(event,xhr,options)])

ajaxSend() 方法在 AJAX 请求开始时执行函数。它是一个 Ajax 事件。

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("div").ajaxSend(function(e,xhr,opt){
    $(this).html("正在请求：" + opt.url);
  });
  $("button").click(function(){
    $("div").load("/example/jquery/demo_ajax_load.asp");
  });
});
</script>
</head>

<body>

<div id="txt"><h2>通过 AJAX 改变文本</h2></div>
<button>改变内容</button>

</body>
</html>

效果前：

效果后：

4. .ajaxStart(function())

ajaxStart() 方法在 AJAX 请求发送前执行函数。它是一个 Ajax 事件。

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

示例与上面差不多。

5. .ajaxStop(function())

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

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("div").ajaxStop(function(){
    alert("所有 AJAX 请求已完成");
  });
  $("button").click(function(){
    $("div").load("/example/jquery/demo_ajax_load.txt");
    $("div").load("/example/jquery/demo_ajax_load.asp");
  });
});
</script>
</head>

<body>

<div id="txt"><h2>通过 AJAX 改变文本</h2></div>
<button>改变内容</button>

</body>
</html>