Wie kann ich Fortschrittsaktualisierungen für XMLHttpRequest in Webbrowsern verfolgen?

Fortschrittsaktualisierungen für XMLHttpRequest erhalten

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 So zeigen Sie einen Fortschrittsbalken an:

<code class="javascript">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();
}</code>

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 Fortschrittsverfolgungsfunktionen fehlen, ermöglichen die oben beschriebenen Techniken Entwicklern, den Fortschritt der Datenübertragung in Webanwendungen zu überwachen. 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.

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