JavaScript检测AJAX事件

Z时代
2024-01-10
分类：问答

好的，所以基本上我想在页面上放一些JavaScript，以某种方式附加某种全局事件侦听器，该侦听器可以在发出ajax请求时检测并执行某些操作（无需直接从调用中调用它），而不管ajax如何打电话了。

我想出了如何使用jquery-如果ajax请求是由 jquery 完成的。这是一个示例代码：

$.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框架，甚至不使用任何框架。因此，例如，如果我在页面上

包含以下代码（w3schools的通用ajax代码）：

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事件侦听器应该能够

检测到这一请求。好吧，我将该代码添加到了页面中，并将其附加到了随机链接的onclick上（是的，代码本身可以工作），但是上面的jquery“全局事件监听器”代码未能检测到该调用。

我做了更多的挖掘工作，我知道我基本上可以将对象保存到temp对象，并使用“包装器”对象覆盖当前对象，该包装器将调用指定的函数，然后调用temp函数，但这需要我提前知道创建/使用原始对象的时间。但我永远不会总是提前知道…

那么…这可能吗？是否有某种方法可以检测到发出的ajax获取/发布请求，而不管它是通过通用对象还是从xyz框架完成的？还是我只需要制作重复的代码来处理每个框架，并且还提前知道正在创建/使用的ajax对象？

编辑：

我忘了提一下，仅检测到一个请求是不够的。我还需要捕获请求中发送的数据。以下评论中提供的链接将帮助您确定是否发出了“ a”请求，但未获取发送的数据。ps-

至少在我看来，以下链接中提供的答案不是很清楚。

回答：

好的，这是我到目前为止提出的：

<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>