Comment puis-je suivre la progression du transfert de données dans XMLHttpRequest ?

Surveillance des progrès dans XMLHttpRequest

XMLHttpRequest permet aux applications Web d'envoyer et de recevoir des données de manière asynchrone. Est-il possible de suivre la progression d'une XMLHttpRequest, en particulier les octets téléchargés et téléchargés ?

Octets téléchargés

Obtenir la progression des octets téléchargés est relativement simple. Utilisez l'événement xhr.upload.onprogress. Le navigateur calcule la progression en comparant la taille des données téléchargées à la taille totale du fichier.

Octets téléchargés

Surveiller la progression des octets téléchargés est plus difficile car le navigateur est généralement ne connaît pas la taille totale de la réponse. Une solution de contournement consiste à définir l'en-tête Content-Length sur le script côté serveur pour indiquer la taille totale de la réponse. Cela permet au navigateur de calculer la progression du téléchargement.

Exemple

Considérons un script de serveur qui lit et envoie un fichier zip d'une taille connue :

<?php
$filesize = filesize('test.zip');
header("Content-Length: " . $filesize);
readfile('test.zip');
?>

Le code JavaScript ci-dessous peut ensuite surveiller la progression du téléchargement à l'aide de l'en-tête Content-Length :

<code class="javascript">function updateProgress(evt) {
   if (evt.lengthComputable) {
      // evt.loaded: Bytes received by the browser
      // evt.total: Total bytes specified in the 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) 
        {  
             //run any callback here
        }  
    };  
    req.send(); 
}</code>

Cette solution vous permet de surveiller la progression du téléchargement même pour les fichiers volumineux pour lesquels il est nécessaire d'interroger le serveur pour les mises à jour. pas idéal.

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!