Wie können Sie den Download-Fortschritt in XMLHttpRequest verfolgen, ohne die Gesamtdateigröße zu kennen?

Überwachung des Fortschritts in XMLHttpRequest

XMLHttpRequest (XHR) bietet einen Mechanismus zum Ausführen asynchroner Anforderungen von JavaScript. Es bietet zwar Unterstützung für die Verfolgung des Upload-Fortschritts mithilfe des xhr.upload.onprogress-Ereignisses, die Ermittlung des Download-Fortschritts ist jedoch nicht so einfach, da Informationen über die Gesamtzahl der zu empfangenden Bytes fehlen.

Upload-Fortschritt verfolgen

Den Upload-Fortschritt zu ermitteln ist relativ einfach. Der Browser speichert Informationen über die Größe der hochgeladenen Datei und die übertragene Datenmenge, sodass der Fortschritt über das xhr.upload.onprogress-Ereignis abgeleitet werden kann.

Überwachung des Download-Fortschritts

Bei Downloads besteht die Herausforderung darin, dass der Browser die Größe der eingehenden Daten nicht erkennen kann. Dies kann jedoch umgangen werden, indem in der Serverantwort ein Content-Length-Header festgelegt wird, der die Gesamtgröße der zu übertragenden Daten angibt.

Serverseitige Konfiguration

Die Serverseite Der für die Bereitstellung des Inhalts verantwortliche Code sollte den Content-Length-Header basierend auf der Größe der heruntergeladenen Datei oder Daten festlegen. Beispiel:

$filesize = filesize('test.zip');

header("Content-Length: " . $filesize); // Set header length
readfile('test.zip');
exit 0;

Clientseitige Implementierung

Mit dem Content-Length-Headersatz kann der clientseitige Code nun den Download-Fortschritt verfolgen:

function updateProgress(evt) {
  if (evt.lengthComputable) {
    // evt.loaded: Bytes received by the browser
    // evt.total: Total bytes defined by 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) {
      // Callback actions here
    }
  };
  req.send();
}

Dieser Code erstellt mithilfe der jQuery-UI-Bibliothek einen Fortschrittsbalken, der den Fortschrittsprozentsatz beim Empfang der Daten anzeigt. Durch die Nutzung des Content-Length-Headers kann der Browser den Download-Fortschritt genau berechnen und anzeigen, was ihn für große Datei-Downloads nützlich macht, bei denen eine visuelle Fortschrittsanzeige gewünscht ist.

Das obige ist der detaillierte Inhalt vonWie können Sie den Download-Fortschritt in XMLHttpRequest verfolgen, ohne die Gesamtdateigröße zu kennen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!