Comment puis-je intercepter les requêtes AJAX sur une page Web pour des actions personnalisées ?

Comment se connecter aux requêtes AJAX sur une page Web

Intercepter les requêtes AJAX sur une page Web permet aux développeurs d'effectuer des actions personnalisées avant d'envoyer des requêtes ou de traiter les réponses du serveur . Cela peut être utile pour journaliser, modifier des requêtes ou améliorer la sécurité.

Utilisation d'écouteurs d'événements

Une approche pour se connecter aux requêtes AJAX consiste à utiliser des écouteurs d'événements. En attachant un écouteur d'événements à l'objet XMLHttpRequest, les développeurs peuvent capturer des événements tels que « load » et « readystatechange » et effectuer des actions en fonction de l'état de la demande. L'extrait de code suivant montre comment ajouter un écouteur d'événement pour surveiller toutes les requêtes AJAX :

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

Dans ce code, la méthode open() du prototype XMLHttpRequest est remplacée pour attacher un écouteur d'événement de chargement à chaque requête. . Lorsqu'une requête AJAX est lancée, l'événement de chargement sera déclenché et la fonction de rappel spécifiée sera exécutée.

En utilisant des écouteurs d'événement, les développeurs peuvent effectuer diverses actions en fonction du type d'événement. Par exemple, ils peuvent enregistrer les détails de la demande, modifier les en-têtes de la demande ou traiter les données de réponse.

Notes de compatibilité

L'approche de l'écouteur d'événements est prise en charge par la plupart des technologies modernes. navigateurs, notamment Chrome, Firefox et Edge. Cependant, il peut ne pas fonctionner correctement dans les anciennes versions d'Internet Explorer (IE) et il ne prend pas en charge les requêtes API de récupération natives.

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!