基于XMLHttpRequest对象的ajax拦截

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/xiaochunblog/article/details/83351987

导读

    在web前端开发中，我们经常会与后端进行数据的交互，ajax即是其中的一种方式；它是通过XMLHttpRequest（简称xhr）对象进行的http请求；在发起请求时，首先会创建一个xhr对象，并且每次向服务器发送请求的时候都会调用xhr对象原型中的open方法，因此我们就可以对其进行改造，以达到ajax拦截的效果；

    话不多说，直接上代码：

(function(xhr){
	var req = new XMLHttpRequest();
	req.prototype.open = function(method,url){
		if(某条件){  // 成立的情况，原样发送
			req.prototype.open = xhr.open;
			xhr.open(method,url);
		}
		else{   // 不成立的时候，进行拦截处理
			//  处理函数
		}
	}	
})(window.XMLHttpRequest)

原理分析

  这个方法主要是通过修改xhr对象原型中的方法，从而达到每次调用的open方法都是已经更改过的，所以可以在自定义的open方法中进行相关的处理逻辑；当其满足向后端请求的条件后，可以将原型对象中的open方法更改回来；
  有的同学可能会问，原型中的方法是被自定义函数覆盖掉的，你又不知道原来的函数内容，怎么改呀？
  大家别急，首先，在刚开始window对象中会有一个xhr对象，在xhr对象中有原型方法；我们在改变原型方法之前先将open方法保存起来，如果可以发送，那么就将保存好的open方法赋予新创建的xhr对象的原型中；这样就可以调用open方法进行前后端通信了；
  如果还有同学不太明白为什么改变新创建的xhr对象中的原型方法可以影响整个所有的方法的话，那么请自行查阅一下深拷贝和浅拷贝的相关知识，或者私信给我；