Wie kann ich den Fortschritt der Datenübertragung in XMLHttpRequest verfolgen?

Überwachung des Fortschritts in XMLHttpRequest

XMLHttpRequest ermöglicht Webanwendungen das asynchrone Senden und Empfangen von Daten. Ist es möglich, den Fortschritt einer XMLHttpRequest zu verfolgen, insbesondere die hochgeladenen und heruntergeladenen Bytes?

Hochgeladene Bytes

Das Abrufen des Fortschritts der hochgeladenen Bytes ist relativ einfach. Nutzen Sie das Ereignis xhr.upload.onprogress. Der Browser berechnet den Fortschritt, indem er die Größe der hochgeladenen Daten mit der Gesamtdateigröße vergleicht.

Heruntergeladene Bytes

Die Überwachung des Fortschritts der heruntergeladenen Bytes ist für den Browser normalerweise schwieriger kennt die Gesamtantwortgröße nicht. Eine Problemumgehung besteht darin, den Content-Length-Header im serverseitigen Skript festzulegen, um die Gesamtantwortgröße anzugeben. Dadurch kann der Browser den Download-Fortschritt berechnen.

Beispiel

Stellen Sie sich ein Serverskript vor, das eine ZIP-Datei mit bekannter Größe liest und sendet:

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

Der folgende JavaScript-Code kann dann den Download-Fortschritt mithilfe des Content-Length-Headers überwachen:

<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>

Mit dieser Lösung können Sie den Download-Fortschritt auch für große Dateien überwachen, bei denen der Server nach Updates abgefragt wird nicht ideal.

Das obige ist der detaillierte Inhalt vonWie kann ich den Fortschritt der Datenübertragung in XMLHttpRequest verfolgen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!