監控頁面所有 ajax請求


監控所有ajax請求:

  你是不是有遇到這樣的問題:頁面發起兩個ajax請求,希望它們都成功以后,再做一個動作? 
很容易想到的解決方案是,等其中一個結束以后,再發起另外一個,這個過程用回調函數來完成。 
但是,如果其中一個ajax請求的代碼不是你寫,你改不了,怎么辦? 
又或者說,你只想知道某個url請求什么時候結束,不想管其他的請求,怎么弄?

 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
    </head>
    <body>
        <p id="test"></p>
    </body>
    <script src="js/jquery-1.11.0.min.js"></script>
    <!--首先在頁面引入jquery的后面,緊接着以下代碼:-->
    <script>
        //前提:所有ajax請求都是用jquery的$.ajax發起的,而非原生的XHR;
        var ajaxBack = $.ajax;
        var ajaxCount = 0;
        var allAjaxDone = function(){$('#test').append('all done!<br>');} //一行代碼,就可以知道所有ajax請求什么時候結束
        //由於get/post/getJSON等,最后還是調用到ajax,因此只要改ajax函數即可
        $.ajax = function(setting){
            ajaxCount++;
            var cb = setting.complete;
            setting.complete = function(){
                if($.isFunction(cb)){cb.apply(setting.context, arguments);}
                ajaxCount--;
                if(ajaxCount==0 && $.isFunction(allAjaxDone)){
                    allAjaxDone();
                }
            }
            ajaxBack(setting);
        }
    </script>
    <!--以下是別人的script-->
    <script>
        $.ajax({url: 'js/jquery-1.11.0.min.js', success: function(recv){$('#test').append('別人的ajax請求1,done<br>')}});
    </script>
    <script>
        $.get('css/main.css', null, function(recv){$('#test').append('別人的get請求,done<br>')});
    </script>
    <script>
        $.post('css/main.css', null, function(recv){$('#test').append('別人的post請求,done<br>')});
    </script>
</html>

 

其他的相關函數:

  $.ajax 中

   error:當出錯時調用,可以用來上報錯誤的請求。

   complete:無論成功還是失敗都會調用

 

  高版本中:

  $.promise

  $.when

  

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM