Kann JQuery auf AJAX-Aufrufe von anderem Javascript hören?

Es ist eine alte Frage, aber vielleicht ist diese Antwort auch anderen helfen können.

Folgen alle ajax-Aufrufe auf ein HTML-doc, können Sie überschreiben die XMLHttpRequest-Prototyp.
Auf diese Weise können Sie Uhr für Aktionen auf Methoden des XMLHttpRequest-Objekte.

Hier ist eine kleine Probe-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;

Mit dieser Probe, für jede AJAX-Aufruf werden Sie eine Warnung in der javascript-Konsole.

Es ist nicht jQuery-Skript, aber Sie können die jQuery-innen, wie Sie wollen.

Diese Lösung wahrscheinlich nicht funktionieren auf IE 6 oder älter, aber es funktioniert in FF, IE7+, Chrome, Opera, Safari...

InformationsquelleAutor der Antwort Nicolas

Mein Freund Sie können dies tun, sehr einfach und mit Jquery (Als Sie gesagt haben, Sie Sind mit Jquery)

(Für diejenigen, die nicht verwenden können Sie drive-in Jquery-Bibliothek, die code unter ajax-Funktion zum anzeigen nativen code :') )

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

Dies ist ein code-snippet genommen von der offiziellen jquery-api-docs ( Siehe Global Events")

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

InformationsquelleAutor der Antwort Ravinder Payal

Dieser nimmt den gleichen Ansatz, das hinzufügen einer callback-in der XHR-Prototyp, aber ohne Einstellung von neuen Eigenschaften über die Prototyp oder schreiben unsere eigene event-chaining-Mechanismus. Ich denke, dies ist weniger wahrscheinlich zu Konflikten führen.

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

Diese funktioniert nicht im IE <= 8 (kein support für .addEventListener())

InformationsquelleAutor der Antwort chrishasbrouck