Ajouter un «hook» à toutes les requêtes AJAX sur une page

Je voudrais savoir s'il est possible de «se connecter» à chaque requête AJAX (soit au moment où elle est sur le point d'être envoyée, soit sur des événements) et d'effectuer une action. À ce stade, je suppose qu'il existe d'autres scripts tiers sur la page. Certains d'entre eux peuvent utiliser jQuery, tandis que d'autres ne le font pas. Est-ce possible?

Inspiré par la réponse d' aviv , j'ai fait une petite enquête et c'est ce que j'ai proposé.
Je ne suis pas sûr que ce soit très utile selon les commentaires du script et bien sûr ne fonctionnera que pour les navigateurs utilisant un objet XMLHttpRequest natif .
Je pense que cela fonctionnera si des bibliothèques javascript sont utilisées car elles utiliseront l'objet natif si possible.

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

REMARQUE: La réponse acceptée ne donne pas la réponse réelle car elle est appelée trop tôt.

Vous pouvez faire ceci qui interceptera génériquement n'importe quel AJAX globalement et ne gâchera aucun callback, etc. qui ont peut-être été assignés par des bibliothèques AJAX tierces.

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

Quelques autres documents sur ce que vous pouvez faire ici avec l'API addEventListener ici:

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

(Notez que cela ne fonctionne pas <= IE8)

Puisque vous mentionnez jquery, je sais offres jquery une .ajaxSetup()méthode qui définit les options globales ajax qui incluent les déclencheurs d'événements tels que success, erroret beforeSend- ce qui est ce qui ressemble à ce que vous recherchez.

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

bien sûr, vous devrez vérifier la disponibilité de jQuery sur n'importe quelle page sur laquelle vous essayez d'utiliser cette solution.

Il y a une astuce pour le faire.

Avant que tous les scripts ne s'exécutent, prenez l'objet XHMHttpReuqest d'origine et enregistrez-le dans une autre variable. Remplacez ensuite le XMLHttpRequest d'origine et dirigez tous les appels vers celui-ci via votre propre objet.

Code Psuedo:

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

J'ai trouvé une bonne bibliothèque sur Github qui fait bien le travail, vous devez l'inclure avant tout autre fichier js

https://github.com/jpillora/xhook

voici un exemple qui ajoute un en-tête http à toute réponse entrante

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

En utilisant la réponse de "meouw", je suggère d'utiliser la solution suivante si vous voulez voir les résultats de la demande

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>

En plus de la réponse de meouw, j'ai dû injecter du code dans une iframe qui intercepte les appels XHR, et j'ai utilisé la réponse ci-dessus. Cependant, j'ai dû changer

XMLHttpRequest.prototype.send = function(){

À:

XMLHttpRequest.prototype.send = function(body)

Et j'ai dû changer

oldSend.apply(this, arguments);

À:

oldSend.call(this, body);

Cela était nécessaire pour le faire fonctionner dans IE9 avec le mode document IE8 . Si cette modification n'a pas été effectuée, certains rappels générés par le framework de composants (Visual WebGUI) ne fonctionnaient pas. Plus d'informations sur ces liens:

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

Sans ces modifications, les publications AJAX ne se sont pas terminées.