Obtendo atualizações de progresso para XMLHttpRequest

Os navegadores da Web oferecem o objeto XMLHttpRequest (XHR) para troca de dados cliente-servidor. Embora a API XHR padrão não possua recursos inerentes de rastreamento de progresso, existem métodos para monitorar o progresso da transferência de dados.

Bytes carregados:

XHR expõe o xhr.upload. Evento onprogress para monitorar o progresso dos uploads de dados. Como o navegador rastreia o tamanho total dos dados e a quantidade carregada, ele pode fornecer informações precisas sobre o progresso.

Bytes baixados:

Acompanhar o progresso do download é mais desafiador porque o o navegador não sabe o tamanho dos dados que serão enviados do servidor até que eles cheguem. Uma solução é definir um cabeçalho Content-Length no script do servidor, indicando o tamanho total dos dados a serem enviados. Com esse cabeçalho instalado, o navegador pode monitorar com precisão o progresso do download.

Exemplo de implementação:

O código a seguir demonstra o rastreamento do progresso para um upload de arquivo, usando jQuery UI para exibir uma barra de progresso:

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

Definir o cabeçalho Content-Length no script do lado do servidor garante um acompanhamento preciso do progresso para upload e download de dados.

Conclusão:

Embora a API XHR padrão não possua recursos integrados de rastreamento de progresso, as técnicas descritas acima permitem que os desenvolvedores monitorem o progresso da transferência de dados em aplicativos da web. Ao definir cabeçalhos Content-Length apropriados e utilizar manipuladores de eventos JavaScript, os desenvolvedores podem criar interfaces intuitivas e fáceis de usar que fornecem atualizações de progresso em tempo real para os usuários.