Fügen Sie allen AJAX-Anforderungen auf einer Seite einen "Hook" hinzu

Ich würde gerne wissen, ob es möglich ist, sich in jede einzelne AJAX-Anfrage "einzuhaken" (entweder während sie gesendet wird oder bei Ereignissen) und eine Aktion auszuführen. An dieser Stelle gehe ich davon aus, dass sich auf der Seite andere Skripte von Drittanbietern befinden. Einige davon verwenden möglicherweise jQuery, andere nicht. Ist das möglich?

Inspiriert von Avivs Antwort habe ich ein wenig nachgeforscht und mir das ausgedacht.
Ich bin mir nicht sicher, ob es gemäß den Kommentaren im Skript so nützlich ist und natürlich nur für Browser funktioniert, die ein natives XMLHttpRequest-Objekt verwenden .
Ich denke, es wird funktionieren, wenn Javascript-Bibliotheken verwendet werden, da sie wenn möglich das native Objekt verwenden.

function addXMLRequestCallback(callback){
    var oldSend, i;
    if( XMLHttpRequest.callbacks ) {
        // we've already overridden send() so just add the callback
        XMLHttpRequest.callbacks.push( callback );
    } else {
        // create a callback queue
        XMLHttpRequest.callbacks = [callback];
        // store the native send()
        oldSend = XMLHttpRequest.prototype.send;
        // override the native send()
        XMLHttpRequest.prototype.send = function(){
            // process the callback queue
            // the xhr instance is passed into each callback but seems pretty useless
            // you can't tell what its destination is or call abort() without an error
            // so only really good for logging that a request has happened
            // I could be wrong, I hope so...
            // EDIT: I suppose you could override the onreadystatechange handler though
            for( i = 0; i < XMLHttpRequest.callbacks.length; i++ ) {
                XMLHttpRequest.callbacks[i]( this );
            }
            // call the native send()
            oldSend.apply(this, arguments);
        }
    }
}

// e.g.
addXMLRequestCallback( function( xhr ) {
    console.log( xhr.responseText ); // (an empty string)
});
addXMLRequestCallback( function( xhr ) {
    console.dir( xhr ); // have a look if there is anything useful here
});

HINWEIS: Die akzeptierte Antwort liefert nicht die tatsächliche Antwort, da sie zu früh aufgerufen wird.

Sie können dies tun , das wird allgemein abfangen jede AJAX global und nicht vermasseln jede Rückrufe usw. , die möglicherweise von Dritten AJAX - Bibliotheken zugewiesen wurden.

(function() {
    var origOpen = XMLHttpRequest.prototype.open;
    XMLHttpRequest.prototype.open = function() {
        console.log('request started!');
        this.addEventListener('load', function() {
            console.log('request completed!');
            console.log(this.readyState); //will always be 4 (ajax is completed successfully)
            console.log(this.responseText); //whatever the response was
        });
        origOpen.apply(this, arguments);
    };
})();

Weitere Dokumente, was Sie hier mit der addEventListener-API tun können, finden Sie hier:

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Monitoring_progress

(Beachten Sie, dass dies nicht funktioniert <= IE8)

Da Sie jquery erwähnen, ich weiß jquery bietet eine .ajaxSetup()Methode , dass Sets globale Ajax - Optionen , die die Ereignisauslöser wie umfassen success, errorund beforeSend- das ist , was so klingt , was Sie suchen.

$.ajaxSetup({
    beforeSend: function() {
        //do stuff before request fires
    }
});

Natürlich müssten Sie die Verfügbarkeit von jQuery auf jeder Seite überprüfen, auf der Sie diese Lösung verwenden möchten.

Es gibt einen Trick, um es zu tun.

Bevor alle Skripte ausgeführt werden, nehmen Sie das ursprüngliche XHMHttpReuqest-Objekt und speichern Sie es in einer anderen Variable. Überschreiben Sie dann die ursprüngliche XMLHttpRequest und leiten Sie alle Aufrufe über Ihr eigenes Objekt an sie weiter.

Pseudocode:

 var savd = XMLHttpRequest;
 XMLHttpRequest.prototype = function() {
         this.init = function() {
         }; // your code
         etc' etc'
 };

Ich habe auf Github eine gute Bibliothek gefunden, die den Job gut macht. Sie müssen sie vor allen anderen JS-Dateien einfügen

https://github.com/jpillora/xhook

Hier ist ein Beispiel, das jeder eingehenden Antwort einen http-Header hinzufügt

xhook.after(function(request, response) {
  response.headers['Foo'] = 'Bar';
});

Mit der Antwort "meouw" schlage ich vor, die folgende Lösung zu verwenden, wenn Sie die Ergebnisse der Anfrage sehen möchten

function addXMLRequestCallback(callback) {
    var oldSend, i;
    if( XMLHttpRequest.callbacks ) {
        // we've already overridden send() so just add the callback
        XMLHttpRequest.callbacks.push( callback );
    } else {
        // create a callback queue
        XMLHttpRequest.callbacks = [callback];
        // store the native send()
        oldSend = XMLHttpRequest.prototype.send;
        // override the native send()
        XMLHttpRequest.prototype.send = function() {
            // call the native send()
            oldSend.apply(this, arguments);

            this.onreadystatechange = function ( progress ) {
               for( i = 0; i < XMLHttpRequest.callbacks.length; i++ ) {
                    XMLHttpRequest.callbacks[i]( progress );
                }
            };       
        }
    }
}

addXMLRequestCallback( function( progress ) {
    if (typeof progress.srcElement.responseText != 'undefined' &&                        progress.srcElement.responseText != '') {
        console.log( progress.srcElement.responseText.length );
    }
});

jquery ...

<script>
   $(document).ajaxSuccess(
        function(event, xhr, settings){ 
          alert(xhr.responseText);
        }
   );
</script>

Zusätzlich zu der Antwort von meouw musste ich Code in einen Iframe einfügen, der XHR-Aufrufe abfängt, und die obige Antwort verwenden. Ich musste mich jedoch ändern

XMLHttpRequest.prototype.send = function(){

Zu:

XMLHttpRequest.prototype.send = function(body)

Und ich musste mich ändern

oldSend.apply(this, arguments);

Zu:

oldSend.call(this, body);

Dies war erforderlich, damit es in IE9 mit dem IE8-Dokumentmodus funktioniert . Wenn diese Änderung nicht vorgenommen wurde, funktionierten einige vom Komponentenframework (Visual WebGUI) generierte Rückrufe nicht. Weitere Infos unter diesen Links:

• Function.prototype.call
• Function.prototype.apply

Ohne diese Änderungen wurden AJAX-Postbacks nicht beendet.