Can JQuery listen to AJAX calls from other javascript?

I need to build a feature into a shopping cart that uses AJAX t开发者_JS百科o 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)

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.

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.

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.

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

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

I'd prefer this solution.

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

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

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

$(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)

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

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

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.

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