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 相关文章推荐
HTML-CSS群中单选引发的“事件”
Mar 05 Javascript
asp javascript 实现关闭窗口时保存数据的办法
Nov 24 Javascript
从父页面读取和操作iframe中内容方法
Jul 25 Javascript
jquery全选checkBox功能实现代码(取消全选功能)
Dec 10 Javascript
jquery获取radio值(单选组radio)
Oct 16 Javascript
AngularJS实现表单验证
Jan 28 Javascript
js实现的倒计时按钮实例
Jun 24 Javascript
js实现新浪微博首页效果
Oct 16 Javascript
jquery实现文字单行横移或翻转(上下、左右跳转)
Jan 08 Javascript
vue使用axios实现文件上传进度的实时更新详解
Dec 20 Javascript
详解vue-cli下ESlint 配置说明
Sep 03 Javascript
Vue实现点击按钮复制文本内容的例子
Nov 09 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
一个程序下载的管理程序(四)
2006/10/09 PHP
session在PHP大型web应用中的使用
2011/06/25 PHP
解析php通过cookies获取远程网页的指定代码
2013/06/25 PHP
浅析php插件 HTMLPurifier HTML解析器
2013/07/01 PHP
不常用但很实用的PHP预定义变量分析
2019/06/25 PHP
Laravel 模型使用软删除-左连接查询-表起别名示例
2019/10/24 PHP
gearman中任务的优先级和返回状态实例分析
2020/02/27 PHP
让iframe子窗体取父窗体地址栏参数(querystring)
2009/10/13 Javascript
node.js中的favicon.ico请求问题处理
2014/12/15 Javascript
jQuery+ajax实现动态执行脚本的方法
2015/01/27 Javascript
javascript中indexOf技术详解
2015/05/07 Javascript
javascript+HTML5的Canvas实现Lab单车动画效果
2015/08/07 Javascript
jQuery prototype冲突的2种解决方法(附demo示例下载)
2016/01/21 Javascript
jQuery使用zTree插件实现树形菜单和异步加载
2016/02/25 Javascript
Atitit.js的键盘按键事件捆绑and事件调度
2016/04/01 Javascript
JavaScript事件学习小结(一)事件流
2016/06/09 Javascript
js仿网易表单及时验证功能
2017/03/07 Javascript
Vue.js如何实现路由懒加载浅析
2017/08/14 Javascript
vue-cli3.0使用及部分配置详解
2018/08/29 Javascript
Python 匹配任意字符(包括换行符)的正则表达式写法
2009/10/29 Python
python关闭占用端口方式
2019/12/17 Python
python时间日期操作方法实例小结
2020/02/06 Python
Python列表操作方法详解
2020/02/09 Python
在python image 中实现安装中文字体
2020/05/16 Python
新手常见Python错误及异常解决处理方案
2020/06/18 Python
通过CSS3的object-fit来调整图片适配尺寸的技巧简介
2016/02/27 HTML / CSS
日本面向世界,国际级的免税在线购物商城:DOKODEMO
2017/02/01 全球购物
Under Armour瑞典官方网站:美国高端运动科技品牌
2018/11/21 全球购物
Shopee越南:东南亚与台湾电商平台
2019/02/03 全球购物
行政专员工作职责
2013/12/22 职场文书
八项规定整改方案
2014/02/21 职场文书
信用卡结清证明怎么写
2014/09/13 职场文书
2014年会计个人工作总结
2014/11/24 职场文书
责任书格式
2019/04/18 职场文书
七年级作文之游记
2019/12/11 职场文书
Python万能模板案例之matplotlib绘制直方图的基本配置
2022/04/13 Python