Abrufen von Fortschrittsaktualisierungen für XMLHttpRequest

Webbrowser bieten das XMLHttpRequest (XHR)-Objekt für den Client-Server-Datenaustausch. Während es der Standard-XHR-API an inhärenten Funktionen zur Fortschrittsverfolgung mangelt, gibt es Methoden zur Überwachung des Fortschritts der Datenübertragung.

Hochgeladene Bytes:

XHR macht den xhr.upload verfügbar. onprogress-Ereignis zur Überwachung des Fortschritts von Daten-Uploads. Da der Browser sowohl die Gesamtdatengröße als auch die hochgeladene Menge verfolgt, kann er genaue Fortschrittsinformationen liefern.

Heruntergeladene Bytes:

Das Verfolgen des Download-Fortschritts ist schwieriger, da die Der Browser kennt die Größe der Daten, die vom Server gesendet werden, erst beim Eintreffen. Eine Lösung besteht darin, im Serverskript einen Content-Length-Header festzulegen, der die Gesamtgröße der zu sendenden Daten angibt. Wenn dieser Header vorhanden ist, kann der Browser den Download-Fortschritt genau überwachen.

Beispielimplementierung:

Der folgende Code zeigt die Fortschrittsverfolgung für einen Datei-Upload mithilfe der jQuery-Benutzeroberfläche um einen Fortschrittsbalken anzuzeigen:

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();
}

Das Festlegen des Content-Length-Headers im serverseitigen Skript gewährleistet eine genaue Fortschrittsverfolgung sowohl beim Hoch- als auch beim Herunterladen von Daten.

Fazit:

Während der Standard-XHR-API integrierte Funktionen zur Fortschrittsverfolgung fehlen, ermöglichen die oben beschriebenen Techniken Entwicklern die Überwachung des Fortschritts der Datenübertragung in Webanwendungen. Durch das Festlegen geeigneter Content-Length-Header und die Verwendung von JavaScript-Ereignishandlern können Entwickler intuitive und benutzerfreundliche Schnittstellen erstellen, die Benutzern Fortschrittsaktualisierungen in Echtzeit bereitstellen.