JavaScript检测Ajax事件

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (74)

好的,基本上,我想在页面上添加一些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(任何jQueryAjax方法),无论我如何/何时调用它(作为onClick、页面加载等),它也能工作。

但是,我希望能够扩展这个侦听器来触发,而不管使用的是什么js框架,或者即使没有使用任何框架。所以,例如,如果我在页面上有以下代码(来自W3学校的通用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函数,但这要求我提前知道要创建/使用的原始对象。但我不会总是提前知道...

那么...这有可能吗?是否有某种方法检测AJAXGET/POST请求,无论是使用通用对象还是从xyz框架完成?还是我只需要做重复的代码来处理每个框架,并且提前知道正在创建/使用的Ajax对象?

提问于
用户回答回答于

为了实现IE6的兼容性,不如:

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

热门问答

腾讯云广州一区DNS变更,需要怎么操作?

思潮澎湃轻描淡写的生活,但思潮澎湃
推荐
我也收到相关的通知了,这里分享下~ 2019年1月31日,腾讯云将对广州地区旧的基础网络DNS服务器(10.225.30.181、10.225.30.223)进行下线。在此期间,腾讯云提供最新的DNS服务器供您更新使用。 我们建议您尽快将DNS服务器配置进行更新,并且我们为您提供...... 展开详请

快照容量与费用的比例?如何关闭停用?

帅的惊动我国计算机大神
推荐已采纳
快照已于2019年1月22日0时启动正式商业化进程,商业化后所有存量快照和新产生的快照将根据快照使用的存储容量进行收费。 在快照商业化后,腾讯云仍旧会在国内主要地域为用户提供一定量的免费额度。免费额度策略如下: 免费额度覆盖范围为中国大陆地域,中国香港及海外地域暂无免费快照额...... 展开详请

云服务器购买后多久生效能使用?

Eli Qiao

腾讯 · 高级工程师 (已认证)

腾讯云CVM后台高级研发工程师
推荐

如果使用公有镜像,一般 10s 左右后台就可以创建完成。

欠费资源销毁怎么解决?

西风

renzha.net · 站长 (已认证)

www.renzha.net
推荐
当您的账户发生欠费时,对象存储 COS 会在24小时后停止服务,您的数据可以继续保留120天,如果在此期间未进行续费使账户余额大于等于0, 您的数据将会被销毁。 注意: 欠费停服后,数据占用的存储容量会持续计费,直到销毁数据。 销毁数据后,不可恢复。 用户续费使账户余额大于等于...... 展开详请

React项目的try_files机制,在COS上怎么配置?

galenye

腾讯 · 工程师 (已认证)

对象存储专业搬砖工
推荐
COS的静态网站可以设置默认索引,你这里应该是想实现react-router spa场景下刷新浏览器时,不希望报404的场景吧 可以在COS静态网站这设置一个错误文档的默认索引来实现类似try_files的功能 image.png ... 展开详请

用户主动向云服务器的号码发送短信(不是回复),该条消息能否回调给业务服务器?

推荐

您好,主动上行需配置专属上行码号,月发送量大于300万条可申请配置。未配置专属上行码号用户可先下发短信后用户回复。感谢您对腾讯云短信的支持。

所属标签

扫码关注云+社区