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 相关文章推荐
JavaScript下通过的XMLHttpRequest发送请求的代码
Jun 28 Javascript
javascript阻止浏览器后退事件防止误操作清空表单
Nov 22 Javascript
js setTimeout()函数介绍及应用以倒计时为例
Dec 12 Javascript
JS显示下拉列表框内全部元素的方法
Mar 31 Javascript
JavaScript去除数组里重复值的方法
Jul 13 Javascript
原生js的数组除重复简单实例
May 24 Javascript
简单理解js的prototype属性及使用
Dec 07 Javascript
jQuery树插件zTree使用方法详解
May 02 jQuery
JQueryMiniUI按照时间进行查询的实现方法
Jun 07 jQuery
你点的 ES6一些小技巧,请查收
Apr 25 Javascript
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
Jun 05 jQuery
Angular4.0动画操作实例详解
May 10 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
php中根据变量的类型 选择echo或dump
2012/07/05 PHP
深入PHP curl参数的详解
2013/06/17 PHP
php获取淘宝分类id示例
2014/01/16 PHP
PHP获取文件扩展名的常用方法小结【五种方式】
2018/04/27 PHP
Laravel框架实现多个视图共享相同数据的方法详解
2019/07/09 PHP
PHP基于openssl实现非对称加密代码实例
2020/06/19 PHP
JavaScript setTimeout和setInterval的使用方法 说明
2010/03/25 Javascript
让人期待的2011年度最佳 jQuery 插件分享
2012/03/16 Javascript
基于jquery &amp; json的省市区联动代码
2012/06/26 Javascript
Eclipse去除js(JavaScript)验证错误
2014/02/11 Javascript
Javascript堆排序算法详解
2014/12/03 Javascript
angular.element方法汇总
2015/01/07 Javascript
JQuery实现动态添加删除评论的方法
2015/05/18 Javascript
Jquery中基本选择器用法实例详解
2015/05/18 Javascript
javascript实现任务栏消息提示的简单实例
2016/05/31 Javascript
下一代Bootstrap的5个特点 超酷炫!
2016/06/17 Javascript
详解nodejs操作mongodb数据库封装DB类
2017/04/10 NodeJs
js字符串与Unicode编码互相转换
2017/05/17 Javascript
微信小程序 循环及嵌套循环的使用总结
2017/09/26 Javascript
微信小程序实现复选框效果
2018/12/28 Javascript
vue组件通信传值操作示例
2019/01/08 Javascript
如何使用CSS3和JQuery easing 插件制作绚丽菜单
2019/06/18 jQuery
js字符串类型String常用操作实例总结
2019/07/05 Javascript
vscode中eslint插件的配置(prettier配置无效)
2019/09/10 Javascript
[01:04:02]DOTA2-DPC中国联赛 正赛 Elephant vs IG BO3 第二场 1月24日
2021/03/11 DOTA
使用Django的模版来配合字符串翻译工作
2015/07/27 Python
opencv-python 读取图像并转换颜色空间实例
2019/12/09 Python
Tensorflow: 从checkpoint文件中读取tensor方式
2020/02/10 Python
详解用Python爬虫获取百度企业信用中企业基本信息
2020/07/02 Python
First Aid Beauty官网:FAB急救面霜
2018/05/24 全球购物
Canal官网:巴西女性时尚品牌
2019/10/16 全球购物
神路信息Java面试题目
2013/03/31 面试题
怎样从/向数据文件读/写结构
2014/11/23 面试题
一年级小学生评语大全
2014/12/25 职场文书
论文答辩开场白大全
2015/05/27 职场文书
springboot + mongodb 通过经纬度坐标匹配平面区域的方法
2021/11/01 MongoDB