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程序设计有所帮助。

原文链接:http://www.jb51.net/article/76169.htm

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
YOLO高分设计资源源码,详情请查看资源内容中使用说明 YOLO高分设计资源源码,详情请查看资源内容中使用说明 YOLO高分设计资源源码,详情请查看资源内容中使用说明 YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明
### 回答1: 在 jQuery 中,可以使用 `xhr` 对象的 `onprogress` 事件来监听 AJAX 请求的进度。这个事件会在 AJAX 请求接收到数据时触发,可以用来显示进度条或更新进度信息。 以下是一个例子: ```javascript $.ajax({ url: 'example.com', xhr: function() { var xhr = new window.XMLHttpRequest(); xhr.addEventListener("progress", function(evt){ if (evt.lengthComputable) { var percentComplete = evt.loaded / evt.total; // 进度条更新代码 } }, false); return xhr; }, success: function(data) { console.log(data); } }); ``` 在这个例子中,我们通过 `xhr` 参数来自定义 AJAX 请求对象,并在其中注册 `progress` 事件监听器。在事件回调函数中,我们可以计算出当前的进度,并进行进度条更新等操作。成功时,我们输出返回数据到控制台。 ### 回答2: jQuery Ajax进度指的是在使用jQueryAjax方法发送请求时,可以获取到请求的进度信息。 在发送Ajax请求时,可以通过设置xhr对象的`onprogress`事件来监听请求的进度。该事件会在浏览器接收到响应数据的过程中周期性触发,通过传递的参数可以获取到当前接收到的数据量、总数据量以及当前的加载进度。 具体实现可以如下: ```js $.ajax({ url: '请求地址', type: '请求方法', xhrFields: { onprogress: function (e) { // 当前接收到的数据量 var loaded = e.loaded; // 总数据量(如果服务器没有提供Content-Length,返回0) var total = e.total; // 计算当前加载进度 var percent = loaded / total * 100; // 更新页面显示进度信息 $('.progress').text(percent + '%'); } }, success: function (data) { // 请求成功处理逻辑 }, error: function (xhr) { // 请求失败处理逻辑 } }); ``` 通过以上代码,我们可以在浏览器接收响应的过程中,实时获取到加载进度,并根据需求进行相应的处理。比如可以在页面中实时显示进度条,或者在加载完成后显示加载完成的提示信息。 总结来说,jQueryAjax进度可以通过监听`xhr`对象的`onprogress`事件来获取到请求的进度信息,从而实现相关的业务逻辑。 ### 回答3: jQuery AJAX进度是指在使用jQueryAJAX方法发送请求时,可以监控请求的进度。通常,这是通过发送请求、接收响应和更新进度的事件来实现的。 首先,在使用AJAX方法发送请求之前,需要设置一个事件处理程序来监控请求的进度。可以使用jQuery的xhr对象来设置这些事件处理程序。如下所示: ```javascript var xhr = new XMLHttpRequest(); xhr.upload.addEventListener('progress', function(event) { var percent = Math.round((event.loaded / event.total) * 100); console.log('上传进度:' + percent + '%'); }); xhr.addEventListener('progress', function(event) { var percent = Math.round((event.loaded / event.total) * 100); console.log('下载进度:' + percent + '%'); }); ``` 在发送请求时,可以传入这个xhr对象作为参数,以便监控请求的进度。如下所示: ```javascript $.ajax({ xhr: function() { return xhr; }, // 其他请求参数 }); ``` 在上述代码中,`.ajax()`方法的`xhr`参数被设置为一个函数,该函数返回xhr对象。这样,请求将使用我们设置的xhr对象来监控进度。 接下来,上传和下载进度事件将在实际上传和下载数据时触发。事件处理程序中的代码将计算平均百分比,并在控制台上显示进度信息。 总结起来,jQuery AJAX进度是通过设置xhr对象的事件处理程序来监控请求的上传和下载进度。可以使用`xhr.upload.addEventListener()`来监控上传进度,`xhr.addEventListener()`来监控下载进度。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值