重写:XMLHttpRequest请求
js中如何重新的方法覆盖之前的方法:
var newFunction = oldFunction
oldFunction = function (){
return newFunction()// 或者 newFunction.call(this, arguments)
}
在请求的每个生命周期监听请求,这样我们就可以很容实现代理访问了。
;(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 () {
console.log("abort")
console.log(this)
ajaxEventTrigger.call(this, 'ajaxAbort');
}, false);
realXHR.addEventListener('error', function () {
console.log("error")
console.log(this)
ajaxEventTrigger.call(this, 'ajaxError');
}, false);
realXHR.addEventListener('load', function () {
console.log("load")
console.log(this)
ajaxEventTrigger.call(this, 'ajaxLoad');
}, false);
realXHR.addEventListener('loadstart', function () {
console.log("loadstart")
console.log(this)
ajaxEventTrigger.call(this, 'ajaxLoadStart');
}, false);
realXHR.addEventListener('progress', function () {
console.log("progress")
console.log(this)
ajaxEventTrigger.call(this, 'ajaxProgress');
}, false);
realXHR.addEventListener('timeout', function () {
console.log("timeout")
console.log(this)
ajaxEventTrigger.call(this, 'ajaxTimeout');
}, false);
realXHR.addEventListener('loadend', function () {
console.log("loadend")
console.log(this)
ajaxEventTrigger.call(this, 'ajaxLoadEnd');
}, false);
realXHR.addEventListener('readystatechange', function () {
console.log("readystatechange")
console.log(this)
ajaxEventTrigger.call(this, 'ajaxReadyStateChange');
}, false);
return realXHR;
}
window.XMLHttpRequest = newXHR;
})();