前端如何监听页面中所有发送请求的事件？

Question

比如页面中有个ajax的按钮，我希望能不通过修改这个绑定事件，而是通过一个全站的js监听页面中发送请求的事件，在他发送请求的时候加载一个动画，有返回信息的时候动画消失

Answer 1

想到一个非常 hackish 的方法：

old = XMLHttpRequest;
XMLHttpRequest = function() { console.log(arguments); return old.apply(this, arguments); }

Answer 2

汗，起初以为问的是jquery，泪流。你可以参考jquery的实现。

jquery 官方文档的这些函数，https://api.jquery.com/category/ajax/global-ajax-event-handlers/ 。可以满足你的需求的。

通过$.ajax发送的请求，可以通过global (default: true)参数设置是否触发全局的这些监控，默认是开启的。如果某些请求不需要触发全局监控，可以将global 设置为false。

Answer 3

只能修改原生ajax方法，有类库是这么做的，忘记叫什么了

Answer 4

用Pub/Sub吧~其实也就是一个全局事件，将事件名进行命名空间划分。下面是实现的伪代码~

// app.js

// lodash, backbone
var _ = require('lodash');
var Backbone = require('backbone');

var app = window.app = {};
app.pubsub = {};
_.extend(app.pubsub, Backbone.Events);

app.pubsub.on('ajax:before', function() {
  // 显示 loading 动画...
});

app.pubsub.on('ajax:after', function() {
  // 隐藏 loading 动画...
});

// test.js

$('button[type="submit"]').on('click', function(e) {
  app.pubsub.trigger('ajax:before');
  // 你的请求逻辑
  $.post(url, data)
    .done(function() {
      app.pubsub.trigger('ajax:after');
    });
});

Answer 5

这在旧版浏览器中非常困难，随着Web技术的成熟在新版浏览器中是完全可以做到的。借助于 Performance API可以监控网络请求。

function perf_observer(list, observer) { 
   // Process the "resource" event 
} 
var observer2 = new PerformanceObserver(perf_observer); 
observer2.observe({entryTypes: ["resource"]});

可以参考这篇文章：https://dy.163.com/article/FI...

Answer 6

下面是我的答案，想踩的尽管踩，本人绝无怨言
---------------------------------- 分割线 ------------------------------
像click,dbclick,mouseover....等等这些事件都叫做“DOM相关事件”，这些事件由浏览器事先给你设定好了“触发事件的时机”，可以直接使用。而事件本质上是和DOM无关的，你可以在任何时候通过给对象绑定“自定义的事件监听器”并在合适的时候“手动触发”这个事件来实现你想要的效果；

绑定事件：

$("#id").bind("myEvent.colorChange",function(){//callback})

触发事件：

// 当出现你所期望的状态的时候，“手动触发”该事件
if($("#id").css("color")==rgb(51, 51, 51)){
    $("#id").trigger("myEvent.colorChange");
}