JavaScript. Подробное руководство, 6-е издание

Для каждого запроса броузер может возбуждать только по одному событию «load», «abort», «timeout» и «error». Проект спецификации «ХНН2» требует, чтобы броузеры возбуждали событие «loadend» после одного из этих событий. Однако на момент написания этих строк событие «loadend» не было реализовано ни в одном из броузеров.

Для регистрации обработчиков всех этих событий, возникающих в ходе выполнения запроса, можно использовать метод addEventListener объекта XMLHttpRequest. Если каждое из этих событий обрабатывается единственным обработчиком, эти обработчики обычно проще установить, присвоив их соответствующим свойствам объекта, таким как onprogress и onload. Определяя наличие этих свойств, можно даже проверить поддержку соответствующих событий в броузере:

  if ("onprogress" in (new XMLHttpRequest)) {
   // События, возникающие в ходе выполнения запроса, поддерживаются
  }

Объект события, связанный с этими событиями, возникающими в ходе выполнения запроса, в дополнение к свойствам обычного объекта Event, таким как type и timestamp, добавляет три полезных свойства. Свойство loaded определяет количество байтов, переданных к моменту возбуждения события. Свойство total содержит общий объем (в байтах) загружаемых данных, определяемый из заголовка «Content-Length», или 0, если объем содержимого не известен. Наконец, свойство lengthComputable содержит значение true, если общий объем содержимого известен, и false - в противном случае. Очевидно, что свойства total и loaded особенно полезны в обработчиках событий, возникающих в ходе выполнения запроса:

  request.onprogress = function(e) {
   if (e.lengthComputable)
   progress.innerHTML = Math.round(100*e.loaded/e.total) + ”% Выполнено";
  }

18.1.4.1. События, возникающие в ходе выгрузки

Кроме событий, которые удобно использовать для мониторинга загрузки НТТР-ответа, спецификация «ХНН2» также определяет события для мониторинга выгрузки HTTP-запроса. В броузерах, реализующих эту возможность, объект XMLHttpRequest имеет свойство upload. Значением свойства upload является объект, определяющий метод addEventListener и полный набор свойств-событий хода выполнения операции выгрузки, таких как onprogress и onload. (Однако этот объект не определяет свойство onreadystatechange: в процессе выгрузки генерируются только эти новые события.)

Обработчики событий хода выполнения операции выгрузки можно использовать точно так же, как используются обычные обработчики событий хода выполнения загрузки. Для объекта х типа XMLHttpRequest обработчик х.onprogress позволяет вести мониторинг хода выполнения загрузки ответа. А свойство х.upload.onprogress– мониторинг хода выполнения выгрузки запроса.

Пример 18.11 демонстрирует, как использовать событие «progress», генерируемое в ходе выгрузки запроса, для организации обратной связи с пользователем. Этот пример также демонстрирует, как получать объекты File с применением механизма буксировки (drag-and-drop) и как с помощью объекта FormData выгружать сразу несколько файлов в одном запросе XMLHttpRequest. На момент написания этих строк спецификации, определяющие эти особенности, находились в состоянии проектирования и этот пример работал не во всех броузерах.

Пример 18.11. Мониторинг хода выполнения операции выгрузки

  // Отыскивает все элементы с классом "fileDropTarget" и регистрирует
  // обработчики событий механизма DnD, чтобы они могли откликаться
  // на операции буксировки файлов. При сбросе файлов на эти элементы
  // они выгружают их на URL-адрес, указанный в атрибуте data-uploadto.
  whenReady(function {
   var elts = document.getElementsByClassName("fileDropTarget");
   for(var і = 0; і < elts.length; i++) {
   var target = elts[i];
   var url = target.getAttribute("data-uploadto");
   if (!url) continue;
   createFileUploadDropTarget(target, url);
   }
   function createFileUploadDropTarget(target, url) {
   // Следит за ходом выполнения операции выгрузки и позволяет отвергнуть
   // выгрузку файла. Можно было бы обрабатывать сразу несколько параллельных
   // операций выгрузки, но это значительно усложнило бы
   // отображение хода их выполнения,
   var uploading = false;
   console.log(target.url);
   target.ondragenter = function(e) {
   console. log("dragenter");
   if (uploading) return; // Игнорировать попытку сброса, если
   // элемент уже занят выгрузкой файла
   var types = e.dataTransfer.types;
   if (types &&
   ((types.contains && types.contains("Files")) ||
   (types.indexOf && types.index0f("Files”) !== -1))) {
   target.classList.add("wantdrop");
   return false;
   }
   };

   target.ondragover = function(e) {
   if (!uploading) return false;
   };
   target.ondragleave = function(e) {
   if (!uploading) target.classList.remove("wantdrop");
   };
   target.ondrop = function(e) {
   if (uploading) return false;
   var files = e.dataTransfer.files;
   if (files && files.length) {
   uploading = true;
   var message = "Выгружаются файлы:<ul>";
   for(var і = 0; і < files.length; i++)
   message += "<li>" + files[i].name + "</li>";
   message += "</ul>";
   target.innerHTML = message;