导读
在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对象中的原型方法可以影响整个所有的方法的话,那么请自行查阅一下深拷贝和浅拷贝的相关知识,或者私信给我;