Comment intercepter toutes les requêtes AJAX sur une page avec des actions personnalisées ?

Intercepter toutes les requêtes AJAX sur une page avec des actions personnalisées

Q : Est-il possible de "s'accrocher" à toutes les requêtes AJAX sur une page , avant leur envoi ou pendant des événements, pour effectuer des actions personnalisées ?

R : Oui, c'est possible avec l'approche suivante :

Intercepter les requêtes AJAX

Pour intercepter toutes les requêtes AJAX sur une page, nous pouvons surcharger la méthode open() de l'objet XMLHttpRequest, qui est utilisé pour initier les requêtes. En interceptant la méthode open(), nous pouvons exécuter nos actions personnalisées avant l'envoi de la requête.

Voici le code pour intercepter les requêtes AJAX :

<code class="js">(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);
    };
})();</code>

En exécutant le code ci-dessus, nous peut effectuer toutes les actions nécessaires, telles que la journalisation de l'URL de la requête, l'ajout d'en-têtes supplémentaires ou la modification des données de la requête.

Scripts tiers

Cette approche fonctionne même avec des scripts tiers utilisant jQuery ou d'autres bibliothèques AJAX, car nous interceptons l'objet XMLHttpRequest sous-jacent, qui est utilisé par toutes les implémentations AJAX. Cependant, il est important de noter que cette approche peut ne pas fonctionner avec l'API de récupération native.

Ressources supplémentaires

Pour plus d'informations sur l'API addEventListener pour la gestion des événements AJAX, reportez-vous à : https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Monitoring_progress

Support du navigateur

Cette approche ne ne fonctionne pas pour Internet Explorer 8 ou version antérieure.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!