我想知道是否有可能“挂钩”到每一个 AJAX 请求(无论是即将发送还是在事件上)并执行操作。在这一点上,我假设页面上还有其他第三方脚本。其中一些可能会使用 jQuery,而另一些则不会。这可能吗?
为页面上的所有 AJAX 请求添加“钩子”
IT技术
javascript
ajax
xmlhttprequest
2021-02-03 22:11:21
6个回答
注意:接受的答案不会产生实际响应,因为它被调用得太早了。
您可以这样做,这将在全局范围内拦截任何AJAX,并且不会搞砸任何可能已由任何第三方 AJAX 库分配的回调等。
(function() {
var origOpen = XMLHttpRequest.prototype.open;
XMLHttpRequest.prototype.open = function() {
console.log('request started!');
this.addEventListener('load', function() {
console.log('request completed!');
console.log(this.readyState); //will always be 4 (ajax is completed successfully)
console.log(this.responseText); //whatever the response was
});
origOpen.apply(this, arguments);
};
})();
您可以在此处使用 addEventListener API 执行的操作的更多文档:
(注意这不起作用 <= IE8)
受到aviv 回答的启发,我做了一些调查,这就是我想出的。根据脚本中的注释,
我不确定它是否有用,当然只适用于使用本机 XMLHttpRequest 对象的浏览器。
我认为如果 javascript 库正在使用,它会起作用,因为如果可能,它们将使用本机对象。
function addXMLRequestCallback(callback){
var oldSend, i;
if( XMLHttpRequest.callbacks ) {
// we've already overridden send() so just add the callback
XMLHttpRequest.callbacks.push( callback );
} else {
// create a callback queue
XMLHttpRequest.callbacks = [callback];
// store the native send()
oldSend = XMLHttpRequest.prototype.send;
// override the native send()
XMLHttpRequest.prototype.send = function(){
// process the callback queue
// the xhr instance is passed into each callback but seems pretty useless
// you can't tell what its destination is or call abort() without an error
// so only really good for logging that a request has happened
// I could be wrong, I hope so...
// EDIT: I suppose you could override the onreadystatechange handler though
for( i = 0; i < XMLHttpRequest.callbacks.length; i++ ) {
XMLHttpRequest.callbacks[i]( this );
}
// call the native send()
oldSend.apply(this, arguments);
}
}
}
// e.g.
addXMLRequestCallback( function( xhr ) {
console.log( xhr.responseText ); // (an empty string)
});
addXMLRequestCallback( function( xhr ) {
console.dir( xhr ); // have a look if there is anything useful here
});
既然你提到的jQuery,我知道jQuery提供了一个.ajaxSetup()
方法,其中包括事件触发的套装全局AJAX选项success
,error
以及beforeSend
-这是什么听起来像你在找什么。
$.ajaxSetup({
beforeSend: function() {
//do stuff before request fires
}
});
当然,您需要在尝试使用此解决方案的任何页面上验证 jQuery 的可用性。
我在 Github 上找到了一个很好的库,可以很好地完成这项工作,您必须在任何其他 js 文件之前包含它
https://github.com/jpillara/xhook
这是一个向任何传入响应添加 http 标头的示例
xhook.after(function(request, response) {
response.headers['Foo'] = 'Bar';
});
有一个技巧可以做到。
在所有脚本运行之前,获取原始 XHMHttpReuqest 对象并将其保存在不同的变量中。然后覆盖原始 XMLHttpRequest 并通过您自己的对象将所有调用定向到它。
伪代码:
var savd = XMLHttpRequest;
XMLHttpRequest.prototype = function() {
this.init = function() {
}; // your code
etc' etc'
};