web-dev-qa-db-fra.com

Comment afficher l'état de chargement en pourcentage pour la réponse ajax?

Je veux montrer le pourcentage d'utilisateur de la réponse ajax chargée avec une barre de progression. Existe-t-il un moyen d'y parvenir? En ce moment, je montre juste une image.

Voici mon exemple de code:

$('#loadingDiv').show();

$.ajax({
        type : 'Get',
        url : myUrl,
        success : function(response) {
            $('#loadingDiv').hide();
            populateData(response);
        },
        error: function(x, e) {
                    $('#loadingDiv').hide();
            if (x.status == 500 || x.status == 404) {
                    alert("no data found");
                }
        }
    });

Code HTML:

<div id="loadingDiv">
     <img src="loading-img.png"/>
</div>
javascriptjqueryajax
17
Premshankar Tiwari

Il existe deux façons d'afficher un pourcentage réel. Brièvement...

Un - JavaScript natif old school ou jQuery ajax, pour lequel vous avez également besoin de la prise en charge du serveur, une URL différente qui peut vous fournir des mises à jour. Et vous continuez à frapper cette URL sur un intervalle.

Deux - JavaScript natif natif moderne dans les navigateurs HTML5, prenant en charge XMLHTTPRequest2 , également appelé AJAX 2, défini par les nouvelles normes Web et HTML5.

Si deux, bienvenue sur le nouveau web !!
Plusieurs fonctionnalités ont été ajoutées aux navigateurs pour améliorer la connectivité - une partie des fonctionnalités HTML5.

XMLHTTPRequest2 active les événements dans AJAX qui aident à surveiller les progrès, ainsi que beaucoup d'autres choses, à partir de JavaScript lui-même. Vous pouvez afficher le pourcentage réel en surveillant la progression réelle:

var oReq = new XMLHttpRequest();

oReq.addEventListener("progress", updateProgress, false);
oReq.addEventListener("load", transferComplete, false);
oReq.addEventListener("error", transferFailed, false);
oReq.addEventListener("abort", transferCanceled, false);

oReq.open();

Ensuite, vous pouvez définir les gestionnaires ci-dessus ( progress dans votre cas):

function updateProgress (oEvent) {
  if (oEvent.lengthComputable) {
    var percentComplete = oEvent.loaded / oEvent.total;
    // ...
  } else {
    // Unable to compute progress information since the total size is unknown
  }
}

jQuery peut également être utilisé dans le deuxième cas. Après tout, jQuery est pour vous aider avec moins de code, plus à faire!

En espérant que vous vous concentrez sur HTML5 et la nouvelle solution Web, je vous signale Mozilla DOC - Monitoring Progress in AJAX d'où j'ai pris cette solution.

Chaque navigateur dispose désormais d'une documentation pour le Web (comme celle de Mozilla ci-dessus) et, en outre, tous contribuent à une entreprise commune appelée Plateforme Web , en collaboration avec d'autres géants influents du Web et de l'Internet - pour une documentation Web mise à jour commune. C'est un travail en cours, donc pas terminé.

De plus, il n'y a pas de fonctionnalité native dans l'ancien AJAX, pour surveiller les progrès .

À l'ancienne, vous devriez créer une fonction d'intervalle qui continuerait à frapper une URL distincte pour obtenir la mise à jour de la progression. Votre serveur doit également mettre à jour la progression et l'envoyer en tant que réponse à partir de cette URL disponible à partir d'un autre port.

42
Om Shankar