How can I track progress updates for XMLHttpRequest in web browsers?

Obtaining Progress Updates for XMLHttpRequest

Web browsers offer the XMLHttpRequest (XHR) object for client-server data exchange. While the standard XHR API lacks inherent progress tracking capabilities, there are methods to monitor the progress of data transfer.

Bytes Uploaded:

XHR exposes the xhr.upload.onprogress event for monitoring the progress of data uploads. As the browser tracks both the total data size and the amount uploaded, it can provide accurate progress information.

Bytes Downloaded:

Tracking download progress is more challenging because the browser does not know the size of the data that will be sent from the server until it arrives. One solution is to set a Content-Length header on the server script, indicating the total size of the data to be sent. With this header in place, the browser can accurately monitor download progress.

Example Implementation:

The following code示例 demonstrates progress tracking for a file upload, using jQuery UI to display a progress bar:

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

Setting the Content-Length header on the server-side script ensures accurate progress tracking for both uploading and downloading data.

Conclusion:

While the standard XHR API lacks built-in progress tracking capabilities, the techniques described above allow developers to monitor the progress of data transfer in web applications. By setting appropriate Content-Length headers and utilizing JavaScript event handlers, developers can create intuitive and user-friendly interfaces that provide real-time progress updates for users.

The above is the detailed content of How can I track progress updates for XMLHttpRequest in web browsers?. For more information, please follow other related articles on the PHP Chinese website!