Obtention de mises à jour de progression pour XMLHttpRequest

Les navigateurs Web proposent l'objet XMLHttpRequest (XHR) pour l'échange de données client-serveur. Bien que l'API XHR standard ne dispose pas de capacités inhérentes de suivi de la progression, il existe des méthodes pour surveiller la progression du transfert de données.

Bytes Uploaded :

XHR expose le xhr.upload. Événement onprogress pour surveiller la progression des téléchargements de données. Comme le navigateur suit à la fois la taille totale des données et la quantité téléchargée, il peut fournir des informations précises sur la progression.

Octets téléchargés :

Le suivi de la progression du téléchargement est plus difficile car le Le navigateur ne connaît pas la taille des données qui seront envoyées depuis le serveur jusqu'à leur arrivée. Une solution consiste à définir un en-tête Content-Length sur le script du serveur, indiquant la taille totale des données à envoyer. Avec cet en-tête en place, le navigateur peut surveiller avec précision la progression du téléchargement.

Exemple de mise en œuvre :

Le code suivant illustre le suivi de la progression d'un téléchargement de fichier, à l'aide de l'interface utilisateur jQuery. pour afficher une barre de progression :

function updateProgress(evt) {
  if (evt.lengthComputable) {
    // evt.loaded: bytes received
    // evt.total: total bytes (from the Content-Length header)
    var percentComplete = (evt.loaded / evt.total) * 100;
    $('#progressbar').progressbar('option', 'value', percentComplete);
  }
}

function sendreq(evt) {
  var req = new XMLHttpRequest();
  $('#progressbar').progressbar();
  req.onprogress = updateProgress;
  req.open('GET', 'test.php', true);
  req.onreadystatechange = function (aEvt) {
    if (req.readyState == 4) {
      // Handle the response here
    }
  };
  req.send();
}

La définition de l'en-tête Content-Length sur le script côté serveur garantit un suivi précis de la progression du téléchargement et du téléchargement des données.

Conclusion :

Bien que l'API XHR standard ne dispose pas de capacités intégrées de suivi de la progression, les techniques décrites ci-dessus permettent aux développeurs de surveiller la progression du transfert de données dans les applications Web. En définissant des en-têtes Content-Length appropriés et en utilisant des gestionnaires d'événements JavaScript, les développeurs peuvent créer des interfaces intuitives et conviviales qui fournissent des mises à jour de progression en temps réel pour les utilisateurs.