前端 js 监听页面上所有的ajax 请求

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
</head>
<body>
	
</body>
<script type="text/javascript" src="page/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
	;(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('abort', function () { ajaxEventTrigger.call(this, 'ajaxAbort'); }, false);
	  
	  realXHR.addEventListener('error', function () { ajaxEventTrigger.call(this, 'ajaxError'); }, 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('timeout', function () { ajaxEventTrigger.call(this, 'ajaxTimeout'); }, false);
	  
	  realXHR.addEventListener('loadend', function () { ajaxEventTrigger.call(this, 'ajaxLoadEnd'); }, false);
	  
	  realXHR.addEventListener('readystatechange', function() { ajaxEventTrigger.call(this, 'ajaxReadyStateChange'); }, false);
	  
	 
	  let send = realXHR.send;
	  realXHR.send = function(...arg){
		  send.apply(realXHR,arg);
		  realXHR.body = arg[0];
		  ajaxEventTrigger.call(realXHR, 'ajaxSend');
	  }
	  
	  let open = realXHR.open;
	  realXHR.open = function(...arg){
		   open.apply(realXHR,arg)
		   realXHR.method = arg[0];
		   realXHR.orignUrl = arg[1];
		   realXHR.async = arg[2];
		   ajaxEventTrigger.call(realXHR, 'ajaxOpen');
	  }
	  
	  let setRequestHeader = realXHR.setRequestHeader;
	  realXHR.requestHeader = {};
	  realXHR.setRequestHeader = function(name, value){
		    realXHR.requestHeader[name] = value;
			setRequestHeader.call(realXHR,name,value)
	  }
	  return realXHR;
	 }
	  
	 window.XMLHttpRequest = newXHR;
	
	})();
	

</script>
<script>
	
	window.addEventListener("ajaxReadyStateChange",function(e){
		let xhr = e.detail;
		if(xhr.readyState == 4 && xhr.status == 200){
			// xhr.getAllResponseHeaders()  响应头信息
			// xhr.requestHeader			请求头信息
			// xhr.responseURL				请求的地址
			// xhr.responseText				响应内容
			// xhr.orignUrl					请求的原始参数地址
			// xhr.body 					post参数,(get参数在url上面)
			
			console.log(xhr.orignUrl);
		}
	});
	
	
	
	$.ajax({
		url:"./first/data/1.json?a=11",
		type:"get",
		data:{
			a:11,
			b:22
		},
		success(e){
			console.log(e);
			
		}
	});
	
	
</script>
</html>

  

原文地址:https://www.cnblogs.com/muamaker/p/12845218.html