jQuery實(shí)現(xiàn)監(jiān)控頁面所有ajax請求的方法
本文實(shí)例講述了jQuery實(shí)現(xiàn)監(jiān)控頁面所有ajax請求的方法。分享給大家供大家參考,具體如下:
你是不是有遇到這樣的問題:頁面發(fā)起兩個(gè)ajax請求,希望它們都成功以后,再做一個(gè)動作?
很容易想到的解決方案是,等其中一個(gè)結(jié)束以后,再發(fā)起另外一個(gè),這個(gè)過程用回調(diào)函數(shù)來完成。
但是,如果其中一個(gè)ajax請求的代碼不是你寫,你改不了,怎么辦?
又或者說,你只想知道某個(gè)url請求什么時(shí)候結(jié)束,不想管其他的請求,怎么弄?
<!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發(fā)起的,而非原生的XHR;
var ajaxBack = $.ajax;
var ajaxCount = 0;
var allAjaxDone = function(){$('#test').append('all done!<br>');} //一行代碼,就可以知道所有ajax請求什么時(shí)候結(jié)束
//由于get/post/getJSON等,最后還是調(diào)用到ajax,因此只要改ajax函數(shù)即可
$.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>
其他的相關(guān)函數(shù):
$.ajax 中:
error:當(dāng)出錯(cuò)時(shí)調(diào)用,可以用來上報(bào)錯(cuò)誤的請求。
complete:無論成功還是失敗都會調(diào)用
高版本中:
$.promise
$.when
希望本文所述對大家jQuery程序設(shè)計(jì)有所幫助。
- 基于jquery的監(jiān)控?cái)?shù)據(jù)是否發(fā)生改變
- jquery監(jiān)控?cái)?shù)據(jù)是否變化(修正版)
- jquery.autocomplete修改實(shí)現(xiàn)鍵盤上下鍵自動填充示例
- jQuery scroll事件實(shí)現(xiàn)監(jiān)控滾動條分頁示例
- 基于Jquery實(shí)現(xiàn)鍵盤按鍵監(jiān)聽
- jquery.hotkeys監(jiān)聽鍵盤按下事件keydown插件
- jquery 按鍵盤上的enter事件
- 打造個(gè)性化的功能強(qiáng)大的Jquery虛擬鍵盤(VirtualKeyboard)
- jQuery監(jiān)控文本框事件并作相應(yīng)處理的方法
- jQuery 監(jiān)控鍵盤一段時(shí)間沒輸入
相關(guān)文章
jQuery實(shí)現(xiàn)頁面頂部顯示的進(jìn)度條效果完整實(shí)例
這篇文章主要介紹了jQuery實(shí)現(xiàn)頁面頂部顯示的進(jìn)度條效果,以完整實(shí)例形式分析了jQuery基于animate與setTimeout定時(shí)觸發(fā)實(shí)現(xiàn)進(jìn)度條漸進(jìn)顯示功能,非常簡單實(shí)用,需要的朋友可以參考下2015-12-12
jQuery語法總結(jié)和注意事項(xiàng)小結(jié)
jQuery是繼prototype之后的又一個(gè)優(yōu)秀的Javascript框架,它是一個(gè)簡潔快速靈活的JavaScript框架,它能讓你在你的網(wǎng)頁上簡單的操作文檔、處理事件、實(shí)現(xiàn)特效并為Web頁面添加Ajax交互2012-11-11
淺談jQuery before和insertBefore的區(qū)別
下面小編就為大家?guī)硪黄獪\談jQuery before和insertBefore的區(qū)別。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-12-12
jQuery學(xué)習(xí)筆記(2)--用jquery實(shí)現(xiàn)各種模態(tài)提示框代碼及項(xiàng)目構(gòu)架
想實(shí)現(xiàn)一個(gè)模態(tài)的框框,找了很多的jquery插件,都沒有碰到自己滿意的于是自己摸索了一個(gè),接下來為大家介紹下實(shí)現(xiàn)的思路及代碼,希望對你有所幫助2013-04-04
jQuery+Datatables實(shí)現(xiàn)表格批量刪除功能【推薦】
這篇文章主要介紹了jQuery+Datatables實(shí)現(xiàn)表格批量刪除功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-10-10
jQuery動態(tài)生成的元素綁定事件操作實(shí)例分析
這篇文章主要介紹了jQuery動態(tài)生成的元素綁定事件操作,結(jié)合實(shí)例形式分析了jQuery事件綁定的原理及動態(tài)生成的元素綁定事件相關(guān)操作技巧,需要的朋友可以參考下2019-05-05

