JQuery是否可以侦听来自其他javascript的AJAX调用?

I need to build a feature into a shopping cart that uses AJAX to retrieve an updated copy of the template from the server when something changes (e.g. a product is removed). I cannot modify the server side code, or the JavaScript that makes the shopping cart work in the first place. (Not ideal I know, but that's how it is)

我需要将一个特性构建到购物车中，购物车使用AJAX在发生更改(例如，删除产品)时从服务器检索模板的更新副本。我不能修改服务器端代码，也不能修改使购物车首先工作的JavaScript。(我知道这并不理想，但事实就是如此)

What I want to do is run my own JavaScript every time the cart updates. I want to know if it is possible to listen for AJAX calls, and run my code every time one is made.

我想做的是每次购物车更新时运行我自己的JavaScript。我想知道是否有可能监听AJAX调用，并在每次调用时运行代码。

5 个解决方案

#1

To follow all AJAX calls on an HTML doc, you can overwrite the XMLHttpRequest prototype. This way, you can watch for actions on methods of XMLHttpRequest objects.

要跟踪HTML文档上的所有AJAX调用，可以覆盖XMLHttpRequest原型。通过这种方式，您可以监视XMLHttpRequest对象方法上的操作。

Here's a small sample code :

这里有一个小的示例代码:

var open = window.XMLHttpRequest.prototype.open,
    send = window.XMLHttpRequest.prototype.send,
    onReadyStateChange;

function openReplacement(method, url, async, user, password) {
    var syncMode = async !== false ? 'async' : 'sync';
    console.warn(
        'Preparing ' +
        syncMode +
        ' HTTP request : ' +
        method +
        ' ' +
        url
    );
    return open.apply(this, arguments);
}

function sendReplacement(data) {
    console.warn('Sending HTTP request data : ', data);

    if(this.onreadystatechange) {
        this._onreadystatechange = this.onreadystatechange;
    }
    this.onreadystatechange = onReadyStateChangeReplacement;

    return send.apply(this, arguments);
}

function onReadyStateChangeReplacement() {
    console.warn('HTTP request ready state changed : ' + this.readyState);
    if(this._onreadystatechange) {
        return this._onreadystatechange.apply(this, arguments);
    }
}

window.XMLHttpRequest.prototype.open = openReplacement;
window.XMLHttpRequest.prototype.send = sendReplacement;

With this sample, for every AJAX call you'll have a warning in the JavaScript console.

对于这个示例，对于每个AJAX调用，在JavaScript控制台中都有一个警告。

It's not jQuery script, but you can use jQuery inside as you want.

它不是jQuery脚本，但是您可以在其中使用jQuery。

This solution probably won't work on IE 6 or older, but it works in FF, IE7+, Chrome, Opera, Safari...

这个解决方案可能不会适用于IE 6或更老的版本，但是它适用于FF、IE7+、Chrome、Opera、Safari…

#2

I'd prefer this solution.

我喜欢这个解决方案。

$(document).ajaxComplete(function(event,request, settings){
    // Your code here
});

#3

My Friend You can do this very easily with Jquery (As You have told You Are using Jquery)

我的朋友，使用Jquery可以很容易地做到这一点(正如您所说的使用Jquery)

(For those who are not using they can drive in Jquery library code under ajax function to view native code :') )

(对于不使用Jquery的用户，可以在ajax函数下使用Jquery库代码查看本机代码:')

$(document).bind("ajaxSend", function(){
   $("#loading").show();
 }).bind("ajaxComplete", function(){
   $("#loading").hide();
 });

This is an code snippet taken from jquery official api docs ( See Global Events Section)

这是来自jquery官方api文档的代码片段(参见全局事件部分)

https://api.jquery.com/Ajax_Events/

#4

You cannot listen to it but you can use a periodic updater plugin. Look at the below:

你不能听它，但你可以使用定期更新插件。看看下面:

http://plugins.jquery.com/plugin-tags/periodic-updater

#5

-1

This takes the same approach of adding a callback in the XHR prototype, but without setting any new properties on the prototype or writing our own event chaining mechanism. I think this is less likely to introduce conflicts.

这采用了在XHR原型中添加回调的相同方法，但是不需要在原型上设置任何新属性或编写我们自己的事件链接机制。我认为这不太可能引发冲突。

(function() {
  // Reference to the original prototype method we're overriding
  var originalOpen = XMLHttpRequest.prototype.open;

  // Override prototype.open to add a custom callback whenever a request is opened
  XMLHttpRequest.prototype.open = function() {
    this.addEventListener('loadend', customCallback);

    // Execute the original prototype.open without affecting its execution context
    originalOpen.apply(this, arguments);
  };

  // All instances of XMLHttpRequest will execute this callback once on readyState 4
  var customCallback = function () {
    // In this context, `this` refers to the XHR instance that just completed
    console.log(this);

    // Remove the invoking listener to prevent duping on multiple calls to .open
    this.removeEventListener('loadend', customCallback);
  }
}());

This won't work in IE <= 8 (no support for .addEventListener())

这在IE <= 8中不起作用(不支持.addEventListener())))

#1