jQuery实现监控页面所有ajax请求的方法


Posted in Javascript onDecember 10, 2015

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
js类中获取外部函数名的方法
Aug 19 Javascript
jQuery 位置插件
Dec 25 Javascript
js中判断控件是否存在
Aug 25 Javascript
基于Jquery+Ajax+Json的高效分页实现代码
Oct 29 Javascript
javascript内置对象arguments详解
Mar 16 Javascript
JavaScript判断表单中多选框checkbox选中个数的方法
Aug 17 Javascript
jQuery左右滚动支持图片放大缩略图图片轮播代码分享
Aug 26 Javascript
JS使用cookie实现DIV提示框只显示一次的方法
Nov 05 Javascript
jquery日历插件datepicker用法分析
Jan 22 Javascript
移动端刮刮乐的实现方式(js+HTML5)
Mar 23 Javascript
20170918 前端开发周报之JS前端开发必看
Sep 18 Javascript
JavaScript实现更换背景图片
Oct 18 Javascript
js表单提交和submit提交的区别实例分析
Dec 10 #Javascript
浅谈javascript中onbeforeunload与onunload事件
Dec 10 #Javascript
详解JavaScript基于面向对象之创建对象(2)
Dec 10 #Javascript
JS提交form表单实例分析
Dec 10 #Javascript
详解JavaScript基于面向对象之创建对象(1)
Dec 10 #Javascript
AngularJs实现ng1.3+表单验证
Dec 10 #Javascript
理解AngularJs指令
Dec 10 #Javascript
You might like
3
2006/10/09 PHP
php出现Cannot modify header information问题的解决方法大全
2008/04/09 PHP
PHP判断用户是否已经登录(跳转到不同页面或者执行不同动作)
2016/09/22 PHP
PHP生成zip压缩包的常用方法示例
2019/08/22 PHP
PHP var关键字相关原理及使用实例解析
2020/07/11 PHP
两个JavaScript jsFiddle JSBin在线调试器
2010/03/14 Javascript
jquery实现网页查找功能示例分享
2014/02/12 Javascript
Android中的jQuery:AQuery简介
2014/05/06 Javascript
AngularJS中如何使用$http对MongoLab数据表进行增删改查
2016/01/23 Javascript
angular内置provider之$compileProvider详解
2017/09/27 Javascript
微信小程序实战篇之购物车的实现代码示例
2017/11/30 Javascript
JS获取浏览器地址栏的多个参数值的任意值实例代码
2018/07/24 Javascript
对vue中v-on绑定自定事件的实例讲解
2018/09/06 Javascript
原生js实现可兼容PC和移动端的拖动滑块功能详解【测试可用】
2019/08/15 Javascript
layui框架与SSM前后台交互的方法
2019/09/12 Javascript
VUEX-action可以修改state吗
2019/11/19 Javascript
深入理解webpack process.env.NODE_ENV配置
2020/02/23 Javascript
用TensorFlow实现lasso回归和岭回归算法的示例
2018/05/02 Python
python实现zabbix发送短信脚本
2018/09/17 Python
Python参数解析模块sys、getopt、argparse使用与对比分析
2019/04/02 Python
Djang的model创建的字段和参数详解
2019/07/27 Python
python实现输入任意一个大写字母生成金字塔的示例
2019/10/27 Python
Ranorex通过Python将报告发送到邮箱的方法
2020/01/12 Python
tensorflow图像裁剪进行数据增强操作
2020/06/30 Python
使用py-spy解决scrapy卡死的问题方法
2020/09/29 Python
CSS3使用transition属性实现过渡效果
2018/04/18 HTML / CSS
香港优质食材和美酒专门店:FoodWise
2017/09/01 全球购物
阿迪达斯新加坡官方网站:adidas新加坡
2019/12/06 全球购物
综合素质的自我鉴定
2013/10/07 职场文书
狼和鹿教学反思
2014/02/05 职场文书
会议主持词
2014/03/17 职场文书
大学迎新晚会主持词
2014/03/24 职场文书
项目经理任命书
2014/06/04 职场文书
2016元旦晚会主持人开场白和结束语
2015/12/03 职场文书
Redis缓存-序列化对象存储乱码问题的解决
2021/06/21 Redis
Java日常练习题,每天进步一点点(38)
2021/07/26 Java/Android