jQuery監控頁面所有ajax請求的方法
jQuery實現監控頁面所有ajax請求的方法
本文例項講述了jQuery實現監控頁面所有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
希望本文所述對大家jQuery程式設計有所幫助。