Получение обновлений хода выполнения для XMLHttpRequest

Веб-браузеры предлагают объект XMLHttpRequest (XHR) для обмена данными клиент-сервер. Хотя стандартному API XHR не хватает встроенных возможностей отслеживания хода выполнения, существуют методы для отслеживания хода передачи данных.

Загружено байт:

XHR предоставляет файл xhr.upload. Событие onprogress для мониторинга хода загрузки данных. Поскольку браузер отслеживает как общий размер данных, так и объем загруженных данных, он может предоставлять точную информацию о ходе загрузки.

Загружено байт:

Отслеживать ход загрузки сложнее, поскольку браузер не знает размера данных, которые будут отправлены с сервера, пока они не поступят. Одним из решений является установка заголовка Content-Length в серверном сценарии, указывающего общий размер отправляемых данных. Имея этот заголовок, браузер может точно отслеживать ход загрузки.

Пример реализации:

Следующий код демонстрирует отслеживание хода загрузки файла с использованием пользовательского интерфейса jQuery. для отображения индикатора выполнения:

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

Установка заголовка Content-Length в серверном скрипте обеспечивает точное отслеживание процесса загрузки и выгрузки данных.

Вывод:

Хотя в стандартном API XHR отсутствуют встроенные возможности отслеживания хода выполнения, описанные выше методы позволяют разработчикам отслеживать ход передачи данных в веб-приложениях. Устанавливая соответствующие заголовки Content-Length и используя обработчики событий JavaScript, разработчики могут создавать интуитивно понятные и удобные интерфейсы, которые предоставляют пользователям обновления в режиме реального времени.