你可以用这个做很多事情,例如对要ajax的请求链接统一进行加密,统计,修改
也可以用于APP的混合开发中,在他人的网页中添加监听ajax的代码,从而获取他的ajax内容
(function(){
var oldXHR = window.XMLHttpRequest;
window.XMLHttpRequest = function(){/* 重定义默认的XMLHttpRequest方法,增加了监听 */
var realXHR = new oldXHR(),
ajaxEventTrigger = function(event, name){
window.dispatchEvent(
new CustomEvent(name, {detail: event})/* 创建一个事件 */
);/* 触发/派发这个事件 */
};
realXHR.addEventListener('abort', function(){ajaxEventTrigger(this, 'ajaxAbort'); }, false);/* 中止请求时触发 */
realXHR.addEventListener('error', function(){ajaxEventTrigger(this, 'ajaxError'); }, false);/* 请求错误时触发 */
realXHR.addEventListener('load', function(){ajaxEventTrigger(this, 'ajaxLoad'); }, false);/* 请求成功时触发 */
realXHR.addEventListener('loadstart', function(){ajaxEventTrigger(this, 'ajaxLoadStart'); }, false);/* 客户端开始发出请求 */
realXHR.addEventListener('progress', function(){ajaxEventTrigger(this, 'ajaxProgress'); }, false);/* 服务器已经响应,处理请求中触发 */
realXHR.addEventListener('timeout', function(){ajaxEventTrigger(this, 'ajaxTimeout'); }, false);/* 超时触发 */
realXHR.addEventListener('loadend', function(){ajaxEventTrigger(this, 'ajaxLoadEnd'); }, false);/* 请求不管成功失败中止都将最后触发 */
realXHR.addEventListener('readystatechange',function(){ajaxEventTrigger(this, 'ajaxReadyStateChange'); }, false);/* readyState 改变时触发 */
return realXHR;
};
})();
window.addEventListener('ajaxLoad', function ajaxLoad(e){
console.log(e);
window.removeEventListener('ajaxLoad', ajaxLoad);//实现监听一次后,立刻删除
});
xhr = new window.XMLHttpRequest;
xhr.open('GET','https://baidu.com');//打开一个请求
xhr.send();