# JavaScript监听所有Ajax请求的事件
- 需求背景
近期需要做前端页面的性能监控,需要建
- 实现源码
/**
* 不支持CustomEvent的polyfill
*/
;(function () {
if (typeof window.CustomEvent === "function") return false;
function CustomEvent(event, params) {
params = params || {bubbles: false, cancelable: false, detail: undefined};
var evt = document.createEvent('CustomEvent');
evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
return evt;
}
CustomEvent.prototype = window.Event.prototype;
window.CustomEvent = CustomEvent;
})();
;(function () {
function ajaxEventTrigger(event) {
var ajaxEvent = new CustomEvent(event, {detail: this });
window.dispatchEvent(ajaxEvent);
}
var OldXHR = window.XMLHttpRequest;
function newXHR() {
var realXHR = new OldXHR();
realXHR.addEventListener('error', function () {
ajaxEventTrigger.call(this, 'ajaxError');
}, false);
realXHR.addEventListener('timeout', function () {
ajaxEventTrigger.call(this, 'ajaxTimeout');
}, false);
realXHR.addEventListener('abort', function () {
ajaxEventTrigger.call(this, 'ajaxAbort');
}, false);
realXHR.addEventListener('load', function () {
ajaxEventTrigger.call(this, 'ajaxLoad');
}, false);
realXHR.addEventListener('loadstart', function () {
ajaxEventTrigger.call(this, 'ajaxLoadStart');
}, false);
realXHR.addEventListener('progress', function () {
ajaxEventTrigger.call(this, 'ajaxProgress');
}, false);
realXHR.addEventListener('loadend', function () {
ajaxEventTrigger.call(this, 'ajaxLoadEnd');
}, false);
realXHR.addEventListener('readystatechange', function () {
ajaxEventTrigger.call(this, 'ajaxReadyStateChange');
}, false);
return realXHR;
}
window.XMLHttpRequest = newXHR;
})();
- 实现方法及原理
利用javascript的自定义事件,来模拟监听ajax的错误和超时的事件。
# 参考文章
参考文章
相关知识链接