js监听ajax请求事件

qq_2309680188

已于 2023-01-05 19:17:42 修改

阅读量2.6k

点赞数

文章标签： js ajax javascript

于 2021-01-01 19:39:31 首次发布

本文链接：https://blog.youkuaiyun.com/qq_23064433/article/details/112063547

版权

你可以用这个做很多事情，例如对要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();

原链接 https://www.cnblogs.com/jackzhoumine/p/6562890.html