Comment implémenter une barre de progression pour le chargement de données AJAX ?

Intégration de la barre de progression pour le chargement des données AJAX

Lorsque les utilisateurs interagissent avec une application Web, il est crucial de fournir des repères visuels pour indiquer les processus en cours, surtout lors d'opérations chronophages. Cet article suggère une approche pour afficher une barre de progression lors du chargement des données via AJAX.

Considérez le scénario suivant : une liste déroulante invite l'utilisateur à sélectionner une valeur. Lors de la sélection, une requête AJAX récupère et affiche les données d'une base de données. Toutefois, la réponse peut prendre un certain temps. Pour améliorer l'expérience utilisateur, vous souhaitez intégrer un indicateur de progression visuel.

Le code AJAX fourni comprend :

<code class="html">$.ajax({
    type:"post",
    url:"clientnetworkpricelist/yourfile.php",
    data:"title="+clientid,
    success:function(data){
     $("#result").html(data);
    }
});</code>

Pour ajouter une barre de progression, utilisez l'écouteur d'événement de progression de XMLHttpRequest objet. Voici comment vous pouvez l'implémenter à l'aide de jQuery :

<code class="html">$.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; 
                //Handle upload progress here
            } 
        }, false); 
       
       // Download progress
       xhr.addEventListener("progress", function(evt){ 
           if (evt.lengthComputable) {
               var percentComplete = evt.loaded / evt.total; 
               //Handle download progress here
           }
       }, false); 
       
       return xhr;
    },
    type: 'POST',
    url: &quot;/&quot;,
    data: {},
    success: function(data){ 
        // Handle successful response
    }
});</code>

Ce code attache les écouteurs d'événements de progression à l'objet xhr, vous permettant de suivre la progression du téléchargement et du téléchargement. La variable percentComplete calcule le pourcentage de progression, vous permettant de l'afficher à l'utilisateur à l'aide d'une implémentation de barre de progression appropriée.

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!