JavaScript检测AJAX事件
好的,所以基本上我想在页面上有一点javascript,它以某种方式附加了某种全局事件侦听器,可以在发出ajax请求时检测并执行某些操作(无需直接从调用中调用),而不管ajax调用是如何发出的 如果ajax请求是由jquery完成的,我就知道了如何使用jquery实现这一点。下面是一个示例代码:JavaScript检测AJAX事件,javascript,ajax,Javascript,Ajax,好的,所以基本上我想在页面上有一点javascript,它以某种方式附加了某种全局事件侦听器,可以在发出ajax请求时检测并执行某些操作(无需直接从调用中调用),而不管ajax调用是如何发出的 如果ajax请求是由jquery完成的,我就知道了如何使用jquery实现这一点。下面是一个示例代码: $.post( // requested script 'someScript.php', // data to send { 'foo' : 'bar', 'a' :
$.post(
// requested script
'someScript.php',
// data to send
{
'foo' : 'bar',
'a' : 'b'
},
// receive response
function(response){
// do something
}
); // .post
// global event listener
$(document).ajaxSend(
function(event,request,settings){
alert(settings.url); // output: "someScript.php"
alert(settings.data); // output: "foo=bar&a=b"
}
);
使用此代码,无论我在何处/如何调用$.post(..),全局事件侦听器都将触发。如果我使用$.get或$.ajax(任何jquery-ajax方法),无论我如何/何时调用它(作为onclick附加,在页面加载时,无论什么),它都可以工作
然而,我希望能够扩展这个监听器以触发,而不管使用什么js框架,或者即使没有使用框架。因此,例如,如果我将也在一个页面上包含以下代码(来自W3C的通用ajax代码):
然后我在一些随机链接上对该函数进行了onclick调用,我的全局ajax事件监听器应该能够检测到这个请求。我将该代码添加到我的页面并将其附加到随机链接的onclick(是的,代码本身可以工作),但是上面的jquery“全局事件侦听器”代码未能检测到该调用
我做了更多的挖掘,我知道我基本上可以将对象保存到一个临时对象,并用一个“包装器”对象覆盖当前对象,该对象将调用指定的函数,然后调用临时函数,但这需要我提前知道创建/使用的原始对象。但我不会总是提前知道
那么…这可能吗?是否有某种方法可以检测发出的ajax get/post请求,而不管它是使用通用对象还是来自xyz框架?或者我只是需要编写重复的代码来处理每个框架,并且提前知道正在创建/使用的ajax对象
编辑:
我忘了提到,仅仅检测到请求发生是不够的。我还需要捕获请求中发送的数据。下面评论中提供的链接将有助于确定是否发出了“a”请求,但无法获得发送的数据。p、 至少对我来说,下面链接中给出的答案并不十分清楚 好的,这就是我到目前为止的想法:
<script type='text/javascript'>
var s_ajaxListener = new Object();
s_ajaxListener.tempOpen = XMLHttpRequest.prototype.open;
s_ajaxListener.tempSend = XMLHttpRequest.prototype.send;
s_ajaxListener.callback = function () {
// this.method :the ajax method used
// this.url :the url of the requested script (including query string, if any) (urlencoded)
// this.data :the data sent, if any ex: foo=bar&a=b (urlencoded)
}
XMLHttpRequest.prototype.open = function(a,b) {
if (!a) var a='';
if (!b) var b='';
s_ajaxListener.tempOpen.apply(this, arguments);
s_ajaxListener.method = a;
s_ajaxListener.url = b;
if (a.toLowerCase() == 'get') {
s_ajaxListener.data = b.split('?');
s_ajaxListener.data = s_ajaxListener.data[1];
}
}
XMLHttpRequest.prototype.send = function(a,b) {
if (!a) var a='';
if (!b) var b='';
s_ajaxListener.tempSend.apply(this, arguments);
if(s_ajaxListener.method.toLowerCase() == 'post')s_ajaxListener.data = a;
s_ajaxListener.callback();
}
</script>
var s_ajaxListener=新对象();
s_ajaxListener.tempOpen=XMLHttpRequest.prototype.open;
s_ajaxListener.tempSend=XMLHttpRequest.prototype.send;
s_ajaxListener.callback=函数(){
//this.method:使用的ajax方法
//this.url:请求脚本的url(包括查询字符串,如果有的话)(URLCoded)
//this.data:发送的数据,如果有的话,例如:foo=bar&a=b(urlencoded)
}
XMLHttpRequest.prototype.open=函数(a,b){
如果(!a)变量a='';
如果(!b)变量b='';
s_ajaxListener.tempOpen.apply(这是参数);
s_ajaxListener.method=a;
s_ajaxListener.url=b;
if(a.toLowerCase()=='get'){
s_ajaxListener.data=b.split(“?”);
s_ajaxListener.data=s_ajaxListener.data[1];
}
}
XMLHttpRequest.prototype.send=函数(a,b){
如果(!a)变量a='';
如果(!b)变量b='';
s_ajaxListener.tempSend.apply(这是参数);
如果(s_ajaxListener.method.toLowerCase()='post')s_ajaxListener.data=a;
s_ajaxListener.callback();
}
说明:
只需将其c/p到您的页面上,或将其包含在.js文件或其他文件中。这将创建一个名为s_ajaxListener的对象。无论何时发出AJAX GET或POST请求,都会调用s_ajaxListener.callback(),并且以下属性可用:
s_ajaxListener.method:使用的ajax方法。这应该是GET或POST。注意:该值可能并不总是大写,它取决于特定请求的编码方式。我正在讨论自动将其大写或将其留给其他对象以进行不区分大小写的比较是否明智
s_ajaxListener.url:请求的脚本的url(包括查询字符串,如果有)(url编码)。我注意到,这取决于数据的发送方式以及来自哪个浏览器/框架,例如,该值可能最终为“”或“+”或“%20”。我正在讨论在这里解码它是否明智,或者让它去做其他事情
s_ajaxListener.data:发送的数据,如果有的话,例如:foo=bar&a=b(与.url的“问题”相同,并对其进行url编码)
注意事项:
目前来看,这与IE6不兼容。这个解决方案对我来说不够好,因为我希望它与IE6兼容。但是,由于其他很多人不关心IE6,我决定以当前状态发布我的解决方案,因为如果你不关心IE6,它应该对你有用
我已经在(截至发布日期)中对此进行了测试:当前的Safari、当前的Chrome、当前的FireFox、IE8、IE8(IE7兼容)。它目前不适用于IE6,因为IE6使用ActiveX对象,而实际上其他所有东西都使用XMLHttpRequest
现在我不知道如何,基本上是原型化/扩展/重载(?)ActiveXObject(“Microsoft.XMLHTTP”)。这就是我目前正在研究的……有人知道吗
在我上面测试的每种浏览器中,这都适用于来自通用对象以及jquery和原型框架的AJAX请求。我知道还有其他框架,但在我看来,这两个是主要的框架。我可能会使用这些工具,但除此之外,我只需要测试这些工具就可以了
如果有人想通过测试和发布关于其他浏览器和/或框架的结果做出贡献,我们将不胜感激:)对于IE 6兼容性,如何:
<script type='text/javascript'>
var s_ajaxListener = new Object();
// Added for IE support
if (typeof XMLHttpRequest === "undefined") {
XMLHttpRequest = function () {
try { return new ActiveXObject("Msxml2.XMLHTTP.6.0"); }
catch (e) {}
try { return new ActiveXObject("Msxml2.XMLHTTP.3.0"); }
catch (e) {}
try { return new ActiveXObject("Microsoft.XMLHTTP"); }
catch (e) {}
throw new Error("This browser does not support XMLHttpRequest.");
};
}
s_ajaxListener.tempOpen = XMLHttpRequest.prototype.open;
s_ajaxListener.tempSend = XMLHttpRequest.prototype.send;
s_ajaxListener.callback = function () {
// this.method :the ajax method used
// this.url :the url of the requested script (including query string, if any) (urlencoded)
// this.data :the data sent, if any ex: foo=bar&a=b (urlencoded)
}
XMLHttpRequest.prototype.open = function(a,b) {
if (!a) var a='';
if (!b) var b='';
s_ajaxListener.tempOpen.apply(this, arguments);
s_ajaxListener.method = a;
s_ajaxListener.url = b;
if (a.toLowerCase() == 'get') {
s_ajaxListener.data = b.split('?');
s_ajaxListener.data = s_ajaxListener.data[1];
}
}
XMLHttpRequest.prototype.send = function(a,b) {
if (!a) var a='';
if (!b) var b='';
s_ajaxListener.tempSend.apply(this, arguments);
if(s_ajaxListener.method.toLowerCase() == 'post')s_ajaxListener.data = a;
s_ajaxListener.callback();
}
</script>
var s_ajaxListener=新对象();
//增加了对IE的支持
if(XMLHttpRequest的类型==“未定义”){
XMLHttpRequest=函数(){
尝试{返回新的ActiveXObject(“Msxml2.XMLHTTP
<script type='text/javascript'>
var s_ajaxListener = new Object();
// Added for IE support
if (typeof XMLHttpRequest === "undefined") {
XMLHttpRequest = function () {
try { return new ActiveXObject("Msxml2.XMLHTTP.6.0"); }
catch (e) {}
try { return new ActiveXObject("Msxml2.XMLHTTP.3.0"); }
catch (e) {}
try { return new ActiveXObject("Microsoft.XMLHTTP"); }
catch (e) {}
throw new Error("This browser does not support XMLHttpRequest.");
};
}
s_ajaxListener.tempOpen = XMLHttpRequest.prototype.open;
s_ajaxListener.tempSend = XMLHttpRequest.prototype.send;
s_ajaxListener.callback = function () {
// this.method :the ajax method used
// this.url :the url of the requested script (including query string, if any) (urlencoded)
// this.data :the data sent, if any ex: foo=bar&a=b (urlencoded)
}
XMLHttpRequest.prototype.open = function(a,b) {
if (!a) var a='';
if (!b) var b='';
s_ajaxListener.tempOpen.apply(this, arguments);
s_ajaxListener.method = a;
s_ajaxListener.url = b;
if (a.toLowerCase() == 'get') {
s_ajaxListener.data = b.split('?');
s_ajaxListener.data = s_ajaxListener.data[1];
}
}
XMLHttpRequest.prototype.send = function(a,b) {
if (!a) var a='';
if (!b) var b='';
s_ajaxListener.tempSend.apply(this, arguments);
if(s_ajaxListener.method.toLowerCase() == 'post')s_ajaxListener.data = a;
s_ajaxListener.callback();
}
</script>