Quel est le moyen le plus propre d'obtenir la progression d'une requête JQuery ajax ?

Question

En javascript, c'est très simple : il suffit d'attacher le callback à l'adresse suivante {XMLHTTPRequest}.onprogress

var xhr = new XMLHttpRequest();

xhr.onprogress = function(e){
    if (e.lengthComputable)
        var percent = (e.loaded / e.total) * 100;
};

xhr.open('GET', 'http://www...', true);
xhr.onreadystatechange = function() {
    ...
};
xhr.send(null);

mais je fais un site ajax qui télécharge des données html avec JQuery ( $.get() ou $.ajax() ) et je me demandais quelle était la meilleure façon d'obtenir la progression d'une requête afin de l'afficher avec une petite barre de progression mais curieusement, je ne trouve rien d'utile dans la documentation de JQuery...

Answer 1

Suivez les étapes pour afficher la progression de la requête Ajax :

1. Créez un Spinner en utilisant Html & CSS ou utilisez Bootstrap Spinner.
2. Affichez le Spinner lorsque l'utilisateur final demande les données AJAX pour une boucle infinie ou pour une durée limite.
3. Ainsi, après un résultat SUCCESS / ERROR de la requête AJAX, supprimez le Spinner qui est actuellement affiché et montrez vos résultats.

Pour vous faciliter la tâche, je vous recommande d'utiliser des classes JS pour afficher et masquer dynamiquement le spinner à cette fin.

J'espère que cela vous aidera !