Comment afficher une barre de progression pendant le chargement de données Ajax

Lors de la gestion d'événements déclenchés par l'utilisateur tels que la sélection de valeurs dans une liste déroulante, il est courant de récupérer des données de manière asynchrone à l'aide Ajax. Pendant la récupération des données, il est utile de fournir une indication visuelle à l'utilisateur que quelque chose se passe. Cet article explore une méthode pour afficher une barre de progression lors des requêtes Ajax.

Implémentation d'une barre de progression avec Ajax

Pour créer une barre de progression qui suit avec précision la progression d'un appel Ajax, suivez ces étapes :

1. Écouter les modifications du formulaire :

Utilisez addEventListener('change') pour écouter les modifications apportées à la liste déroulante.

2. Lancer une requête Ajax :

Envoyez une requête Ajax pour récupérer les données souhaitées.

3. Utilisation de XMLHttpRequest pour les événements de progression :

Dans les options Ajax, configurez la fonction xhr, qui permet d'accéder à l'objet XMLHttpRequest. Cet objet vous permet de surveiller divers événements, y compris la progression.

4. Surveiller la progression du téléchargement :

Dans la fonction xhr, ajoutez des écouteurs d'événements pour suivre la progression du téléchargement et du téléchargement. Ces événements incluent onloadstart, onprogress et onloadend.

5. Mettre à jour la barre de progression :

Utilisez l'événement progress pour calculer le pourcentage de progression en fonction des propriétés chargées et totales de l'objet d'événement, et mettez à jour la barre de progression en conséquence.

Voici un exemple d'extrait de code qui illustre ces étapes :

$.ajax({
    xhr: function() {
        var xhr = new window.XMLHttpRequest();

        // Upload progress
        xhr.upload.addEventListener("progress", function(evt) {
            if (evt.lengthComputable) {
                var percentComplete = evt.loaded / evt.total;
                // Update progress bar...
            }
        }, false);

        // Download progress
        xhr.addEventListener("progress", function(evt) {
            if (evt.lengthComputable) {
                var percentComplete = evt.loaded / evt.total;
                // Update progress bar...
            }
        }, false);

        return xhr;
    },
    type: "POST",
    url: "/yourfile.php",
    data: "...",
    success: function(data) {
        // Handle successful data retrieval...
    }
});

En incorporant ces techniques, vous pouvez afficher efficacement une barre de progression lors du chargement des données Ajax, garantissant ainsi une expérience utilisateur fluide et informative.