JavaScript的检测AJAX事件 [英] JavaScript detect an AJAX event
问题描述
好了，所以基本上我想有一点的JavaScript的网页上，不知怎的，重视一些全球性的事件监听器，可以检测并做一些事情，如果一个Ajax请求的情况下（不直接调用调用它），而不管如何AJAX调用。
Okay so basically I want to have a bit of javascript on a page that somehow attaches some kind of global event listener that can detect and do something if an ajax request is made (without directly calling it from the call), regardless of how the ajax call is made.
我想通了，如何做到这一点与jQuery - 如果AJAX请求是由的jQuery的正在做的。下面是一个例子$ C $下这样的：
I figured out how to do this with jquery - if the ajax request is being done by jquery. Here is an example code for this:
$.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"
}
);
通过这个code，无论在哪里/我怎么调用$。员额（..），全球事件监听器都会触发。它也可以，如果我使用$不用彷徨或$。阿贾克斯（任何jQuery的AJAX方法），不管如何/当我把它（附于一个onclick，在页面加载，等等）。
With this code, regardless of where/how I call $.post(..), the global event listener will trigger. It also works if I use $.get or $.ajax (any jquery ajax methods), regardless of how/when I call it (attached as an onclick, on page load, whatever).
不过，我希望能够扩展这个监听器触发不管是什么JS框架时，或者即使没有框架使用。因此，举例来说，如果我是为的也的有一个页面上的以下code（一般阿贾克斯$ C $从W3Schools的C）：
However, I want to be able to extend this listener to trigger regardless of what js framework is used, or even if no framework is used. So for instance if I were to also have on a page the following code (generic ajax code from w3schools):
function loadXMLDoc()
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","test.txt",true);
xmlhttp.send();
}
然后，我有一些随机链接一个onclick调用该函数，我的全局AJAX事件侦听器应该能够为的也的检测这一请求。嗯，我补充说，code到我的网页，并连接到一个随机的链接的onclick（是的，C本身的$ C $作品），但jQuery的全球事件监听器code以上未能检测到该呼叫。
And then I have on some random link an onclick call to that function, my global ajax event listener should be able to also detect this request. Well I added that code to my page and attached it to a random link's onclick (yes, the code itself works), but the jquery "global event listener" code above failed to detect that call.
我做了一些更多的挖掘，我知道我可以在对象主要保存到一个临时对象，并覆盖当前的对象与包装对象，将调用指定的函数，然后调用温度的功能，但是这需要我提前知道正在创建的原始对象的时间/使用。但我不会一直都知道提前...
I did some more digging and I know I can basically save the object to a temp object and overwrite the current object with a "wrapper" object that will call a specified function and then call the temp function, but this requires me to know ahead of time the original object being created/used. But I won't always know that ahead of time...
所以...这可能吗？有没有一些方法来检测一个ajax GET / POST请求是，无论它是一个通用的对象或从XYZ框架做了什么？或者，我只是将不得不进行重复code来处理每个框架，也提前知道的Ajax对象（S）正在创建时间/使用？
So...is this possible? Is there some way to detect an ajax get/post request was made, regardless of whether it was done with a generic object or from xyz framework? Or am I just going to have to make duplicate code to handle each framework and also know ahead of time the ajax object(s) being created/used?
编辑：
我忘了提，这是不够的，检测到一个请求时发生。我还需要捕获的数据发送请求。下面评价提供的链接将有助于找出如果a的请求被提出，但没有得到发送的数据。附： - 下面的链接提供了答案不是很清楚，至少对我来说反正。
I forgot to mention that it is not enough to detect that a request occurred. I also need to capture the data being sent in the request. The link provided in the comments below will help figure out if "a" request was made, but not get the data sent. p.s. - the answer provided in the link below is not very clear, at least to me anyways.
推荐答案
好吧，这就是我来了这么远：
Okay this is what I have come up with so far:
<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>
路线：
就在C / P此到您的网页，或将其包含在.js文件或什么的。这将创建一个名为s_ajaxListener的对象。每当一个AJAX GET或POST请求时，s_ajaxListener.callback（）被调用，并且以下属性：
Just c/p this onto your page or include it in a .js file or whatever. This will create an object called s_ajaxListener. Whenever an AJAX GET or POST request is made, s_ajaxListener.callback() is called, and the following properties are available:
s_ajaxListener.method ：使用了AJAX方法。这应该是GET或POST。注：该值可能不总是被大写，这取决于具体要求是如何codeD。我辩论的自动上层套管，或把它留给别的事情与toLowerCase（）为不区分大小写的比较智慧。
s_ajaxListener.method : The ajax method used. This should be either GET or POST. NOTE: the value may not always be uppercase, it depends on how the specific request was coded. I'm debating the wisdom of automatically upper-casing it or leaving it to something else to toLowerCase() for a case-insensitive comparison.
s_ajaxListener.url ：请求脚本的URL（包括查询字符串，如果有的话）（urlen codeD）。我注意到，这取决于数据是如何发送和从浏览器/架构，例如该值可能最终会被称为或+或％20。我辩论在这里进行解码或者让别的东西的智慧。
s_ajaxListener.url : The url of the requested script (including query string, if any) (urlencoded). I have noticed, depending on how the data is sent and from which browser/framework, for example this value could end up being as " " or "+" or "%20". I am debating the wisdom of decoding it here or leave it to something else.
s_ajaxListener.data ：发送的数据，如果有的话如：富=酒吧和放大器; A = B（同'问题'作为.URL它是URL-CN codeD）
s_ajaxListener.data : the data sent, if any ex: foo=bar&a=b (same 'issue' as .url with it being url-encoded)
注：
既然这样，这是不是IE6兼容。该解决方案是不是很够我好，因为我希望它是IE6不兼容。但是，因为其他很多人不在乎IE6，我决定发布我的解决方案在当前状态下，它应该为你工作，如果你不在乎IE6。
As it stands, this is not IE6 compatible. this solution is not quite good enough for me, as I want it to be IE6 compatible. But since a lot of other people don't care about IE6, I decided to post my solution in its current state, as it should work for you if you don't care about IE6.
我在测试这（截至本公布日期）：当前的Safari浏览器，当前浏览器，在当前Firefox，IE8，IE8（IE7兼容）。它目前没有与IE6的工作，因为IE6使用ActiveX对象，而几乎所有其他人使用XMLHtt prequest。
I have tested this in (as of this posted date): Current Safari, Current Chrome, Current FireFox, IE8, IE8 (IE7 Compatible). It doesn't currently work with IE6 because IE6 uses an ActiveX object, while virtually everything else uses XMLHttpRequest.
现在我没有任何线索如何，以及基本的原型/扩展/过载（？）的ActiveXObject（Microsoft.XMLHTTP）。这是我目前正在研究......没有任何人知道副手？
Right now I don't have any clue how to, well basically prototype/extend/overload (?) ActiveXObject("Microsoft.XMLHTTP"). This is what I am currently researching...does anybody know offhand?
在每一个我测试上面的浏览器，其工作原理与来自通用对象AJAX请求，并且还从jQuery和原型框架。我知道有其他的框架在那里，但国际海事组织这两个是主要的。我有可能会QA MooTools的，但除此之外，我很好，只有测试这些。
Under each of the browsers I tested above, this works with AJAX requests from a generic object, and also from the jquery and prototype frameworks. I know there are other frameworks out there, but IMO these 2 are the major ones. I might possibly QA MooTools, but other than that, I'm fine with only testing those.
如果有人想通过其他浏览器和/或框架，测试和发布结果作出贡献，这将是AP preciated：）
If Anybody wants to contribute by testing and posting results about other browsers and/or frameworks, it would be appreciated :)
这篇关于JavaScript的检测AJAX事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
