• jQuery全局Ajax事件处理器


    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>

    效果前:

    效果后:

    6.   .ajaxSuccess(function(event,xhr,options))

    ajaxSuccess() 方法在 AJAX 请求成功时执行函数。它是一个 Ajax 事件。

    示例与上面差不多。

  • 相关阅读:
    服务器&域名那些事儿
    原生js实现简单打字机效果
    Mac OS X 11以上系统的Rootless机制问题
    用hexo书写github.io博客 学习心得 教程
    冒泡排序
    选择排序
    TCP三次握手和四次挥手
    常见HTTP状态码
    JSONP
    前端缓存(cookies、localStorage、sessionStorage)
  • 原文地址:https://www.cnblogs.com/zqzjs/p/4787123.html
Copyright © 2020-2023  润新知