Obtención de actualizaciones de progreso para XMLHttpRequest

Los navegadores web ofrecen el objeto XMLHttpRequest (XHR) para el intercambio de datos cliente-servidor. Si bien la API XHR estándar carece de capacidades inherentes de seguimiento del progreso, existen métodos para monitorear el progreso de la transferencia de datos.

Bytes cargados:

XHR expone el archivo xhr.upload. Evento onprogress para monitorear el progreso de las cargas de datos. A medida que el navegador rastrea tanto el tamaño total de los datos como la cantidad cargada, puede proporcionar información precisa sobre el progreso.

Bytes descargados:

Seguir el progreso de la descarga es más desafiante porque el El navegador no sabe el tamaño de los datos que se enviarán desde el servidor hasta que lleguen. Una solución es establecer un encabezado Content-Length en el script del servidor, que indique el tamaño total de los datos que se enviarán. Con este encabezado en su lugar, el navegador puede monitorear con precisión el progreso de la descarga.

Ejemplo de implementación:

El siguiente código demuestra el seguimiento del progreso de la carga de un archivo mediante jQuery UI. para mostrar una barra de progreso:

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

Establecer el encabezado Content-Length en el script del lado del servidor garantiza un seguimiento preciso del progreso tanto para la carga como para la descarga de datos.

Conclusión:

Si bien la API XHR estándar carece de capacidades integradas de seguimiento del progreso, las técnicas descritas anteriormente permiten a los desarrolladores monitorear el progreso de la transferencia de datos en las aplicaciones web. Al configurar encabezados de longitud de contenido adecuados y utilizar controladores de eventos de JavaScript, los desarrolladores pueden crear interfaces intuitivas y fáciles de usar que brindan actualizaciones de progreso en tiempo real para los usuarios.