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

Je veux montrer à l'utilisateur le pourcentage de la réponse ajax chargé avec une progressbar.
Est-il un moyen pour y parvenir?
Droit maintenant, je suis en train de montrer qu'une image.

Voici mon code d'exemple :

$('#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>
Un peu de research

OriginalL'auteur Premshankar Tiwari | 2013-05-22

  1. 41

    Il y a deux façons de montrer pourcentage réel. Bref...

    Un - ancienne école maternelle du JavaScript ou de l'ajax de jQuery, pour laquelle vous avez besoin de support de serveur en tant que bien, une autre URL, ce qui peut vous donner des mises à jour. Et vous continuez à frapper cette URL sur un intervalle.

    Deux - moderne natif natif JavaScript dans les navigateurs HTML5, le soutien XMLHTTPRequest2, aussi connu comme AJAX 2, défini par le Web et les Normes HTML5.

    Si deux, bienvenue sur le nouveau site web!!

    Plusieurs fonctionnalités ont été ajoutées pour les Navigateurs qui améliorent la connectivité partie des fonctionnalités de HTML5.

    XMLHTTPRequest2 permet d'événements en AJAX qui aident à suivre les progrès accomplis, ainsi que beaucoup d'autres choses, à partir de JavaScript lui-même. Vous pouvez afficher les pourcentage réel par le suivi de l'avancement réel:

    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 d'attaché ci-dessus (progrès 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 être utilisé dans le second cas. Après tout, jQuery est pour vous aider avec moins de code, plus de de faire!

    En espérant que vous vous concentrez sur le HTML5 et la nouvelle solution web, je tiens à souligner que vous Mozilla DOC - Le suivi des Progrès en AJAX d'où j'ai pris cette solution.

    Chaque Navigateur dispose désormais d'une documentation pour le web (comme celui ci-dessus à partir de Mozilla) et, de plus, ils sont tous de contribuer à un projet nommé Plate-forme Web, en collaboration avec d'autres influents du Web et des géants de l'Internet - pour un site Web mis à jour de la Documentation. C'est un travail en cours, donc pas complète.

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

    Dans le old school, vous devez créer une fonction d'intervalle qui permettrait de maintenir sur la frappe d'une adresse URL spécifique pour obtenir la mise à jour des progrès. Votre serveur doit également mettre à jour l'avancement et l'envoyer comme une réponse à partir de cette URL disponibles à partir d'un autre port.

    N'avait aucune idée sur XMLHTTPRequest2, incroyable.
    Cela ne peut pas fonctionner pour moi parce que j'ai un très petit fichier pour récupérer les (quelques OCTETS); mais mon script prend un temps assez long pour être exécuté; je suppose que c'est à cause du serveur de retard... mais comment les distinguer l'un de coincé script à partir d'un serveur lent? J'ai l'impression d'un "veuillez patienter..." message avant de commencer la récupération, mais un "veuillez patienter" pour un 10 octets de sortie ne peut pas durer plus de 10 secondes sans augmenter les soupçonner de "quelque chose de bloqué" à l'utilisateur. Voir stackoverflow.com/questions/35482101/...
    C'est bien pour javascript, mais comment puis-je l'utiliser en jQuery?

    OriginalL'auteur