Affichage d'une barre de progression lors du chargement de données avec AJAX

Lors de l'exécution d'une requête AJAX qui récupère des données d'une base de données, cela peut prendre un certain temps pour que les résultats soient renvoyés. Pour fournir des commentaires à l'utilisateur pendant ce processus de chargement, une barre de progression peut être affichée.

Création d'une barre de progression avec jQuery

La bibliothèque jQuery propose des méthodes intégrées qui facilitent la création et la manipulation des barres de progression. Pour ajouter une barre de progression à votre appel AJAX, vous pouvez attacher un écouteur d'événement à l'objet xhr :

$.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 the progress bar here
            }
        }, false);

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

        return xhr;
    },
    type: 'POST',
    url: "/",
    data: {},
    success: function(data) {
        // Hide the progress bar and display the results
    }
});

Dans ce code :

• L'écouteur d'événement de progression pour la propriété de téléchargement suit la progression de l'envoi des données au serveur.
• L'écouteur d'événement de progression pour l'objet xhr suit la progression de la réception des données du serveur.
• Vous pouvez utiliser la variable percentComplete pour déterminer le pourcentage d'achèvement et mettre à jour la barre de progression en conséquence.
• Après les données ont été récupérées et traitées avec succès, la barre de progression peut être masquée et les résultats peuvent être affichés.

En mettant en œuvre cette approche, vous pouvez améliorer vos rappels AJAX avec une barre de progression conviviale, fournissant un retour visuel pendant les opérations de chargement de données.