Aggiungi un "hook" a tutte le richieste AJAX su una pagina

Mi piacerebbe sapere se è possibile "agganciarsi" a ogni singola richiesta AJAX (sia quando sta per essere inviata, sia su eventi) ed eseguire un'azione. A questo punto presumo che nella pagina siano presenti altri script di terze parti. Alcuni di questi potrebbero utilizzare jQuery, mentre altri no. È possibile?

Ispirato dalla risposta di aviv , ho indagato un po 'e questo è ciò che mi è venuto in mente.
Non sono sicuro che sia così utile secondo i commenti nello script e ovviamente funzionerà solo per i browser che utilizzano un oggetto XMLHttpRequest nativo .
Penso che funzionerà se le librerie javascript sono in uso poiché useranno l'oggetto nativo, se possibile.

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

NOTA: la risposta accettata non fornisce la risposta effettiva perché viene chiamata troppo presto.

Puoi fare ciò che intercetterà genericamente qualsiasi AJAX a livello globale e non rovinerà alcun callback ecc. Che potrebbe essere stato assegnato da librerie AJAX di terze parti.

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

Alcuni altri documenti su ciò che puoi fare qui con l'API addEventListener qui:

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

(Nota che non funziona <= IE8)

Dal momento che si parla di jQuery, lo so offerte jQuery un .ajaxSetup()metodo che imposta le opzioni Ajax globali che includono i trigger evento come success, errore beforeSend- che è quello che suona come quello che stai cercando.

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

ovviamente dovrai verificare la disponibilità di jQuery su qualsiasi pagina su cui tenti di utilizzare questa soluzione.

C'è un trucco per farlo.

Prima che tutti gli script vengano eseguiti, prendi l'oggetto XHMHttpReuqest originale e salvalo in una diversa var. Quindi sovrascrivi l'originale XMLHttpRequest e indirizza tutte le chiamate ad esso tramite il tuo oggetto.

Codice Psuedo:

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

Ho trovato una buona libreria su GitHub che fa bene il lavoro, devi includerla prima di qualsiasi altro file js

https://github.com/jpillora/xhook

ecco un esempio che aggiunge un'intestazione http a qualsiasi risposta in arrivo

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

Utilizzando la risposta di "meouw" suggerisco di utilizzare la seguente soluzione se vuoi vedere i risultati della richiesta

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>

Oltre alla risposta di meouw, ho dovuto iniettare codice in un iframe che intercetta le chiamate XHR e ho utilizzato la risposta sopra. Tuttavia, ho dovuto cambiare

XMLHttpRequest.prototype.send = function(){

Per:

XMLHttpRequest.prototype.send = function(body)

E ho dovuto cambiare

oldSend.apply(this, arguments);

Per:

oldSend.call(this, body);

Ciò era necessario per farlo funzionare in IE9 con la modalità documento IE8 . Se questa modifica non è stata apportata, alcuni call-back generati dal framework dei componenti (Visual WebGUI) non hanno funzionato. Maggiori info a questi link:

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

Senza queste modifiche, i postback AJAX non venivano interrotti.