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

   if (!url) continue; // Пропустить элементы без url
   input.addEventListener("change", function { // При выборе файла
   var file = this.files[0]; // Предполагается выбор единственного файла
   if (!file) return; // Если файл не выбран, ничего не делать
   var xhr = new XMLHttpRequest; // Создать новый запрос
   xhr.open("POST", url); // Методом POST на указанный URL
xhr.send(file); // Отправить файл в теле запроса
   }, false);
   }
  });

Как будет показано в разделе 22.6, тип File является подтипом более общего типа Blob. Спецификация «ХНН2» позволяет передавать методу send произвольные объекты Blob. Свойство type объекта Blob в этом случае будет использоваться для установки заголовка «Content-Type», если он не будет определен явно. Если потребуется выгрузить двоичные данные, сгенерированные клиентским сценарием, можно воспользоваться приемами преобразования данных в объект Blob, демонстрируемыми в разделах 22.5 и 22.6.3, и передавать в виде тела запроса этот объект.

18.1.3.5. Запросы с данными в формате multipart/form-data

Когда наряду с другими элементами HTML-формы включают элементы выгрузки файлов, броузер не может использовать обычный способ представления данных форм и должен отправлять формы, используя специальное значение «multipart/form-data» в заголовке «Content-Type». Этот формат связан с использованием длинных «граничных» строк, делящих тело запроса на несколько частей. Для текстовых данных можно вручную создать тело «multipart/form-data» запроса, но это довольно сложно.

Спецификация «ХНН2» определяет новый прикладной интерфейс FormData, упрощающий создание тела запроса, состоящего из нескольких частей. Сначала с помощью конструктора FormData создается объект FormData, а затем вызовом метода append этого объекта в него добавляются отдельные «части» (которые могут быть строками или объектами File и Blob). В заключение объект FormData передается методу send. Метод send определит соответствующую строку, обозначающую границу, и установит заголовок «Content-Type» запроса. Пример 18.10 демонстрирует использование объекта FormData, с которым мы еще встретимся в примере 18.11.

Пример 18.10. Отправка запроса с данными в формате multipart/form-data

  function postFormData(url, data, callback) {
   if (typeof FormData === "undefined")
   throw new Error("Объект FormData не реализован");
   var request = new XMLHttpRequest; // Новый HTTP-запрос
   request.open("POST", url); // Методом POST на указанный URL
   request.onreadystatechange = function { // Простой обработчик,
if (request.readyState === 4 && callback) // При получении ответа
   callback(request); // вызвать указанную функц.
   };
   var formdata = new FormData;
   for(var name in data) {
   if (!data.hasOwnProperty(name)) continue; // Пропустить унасл. св-ва
   var value = data[name];
   if (typeof value === "function”) continue; // Пропустить методы
   // Каждое свойство станет отдельной "частью" тела запроса.
   // Допускается использовать объекты File
   formdata.append(name, value); // Добавить имя/значение,
   } // как одну часть
   // Отправить пары имя/значение в теле запроса multipart/form-data. Каждая пара -
   // это одна часть тела запроса. Обратите внимание, что метод send автоматически
   // устанавливает заголовок Content-Type, когда ему передается объект FormData
   request.send(formdata);
  }

18.1.4. События, возникающие в ходе выполнения НТТР-запроса

В примерах выше для определения момента завершения HTTP-запроса использовалось событие «readystatechange». Проект спецификации «ХНН2» определяет более удобный набор событий, уже реализованный в Firefox, Chrome и Safari. В этой новой модели событий объект XMLHttpRequest генерирует различные типы событий на разных этапах выполнения запроса, благодаря чему отпадает необходимость проверять значение свойства readyState.

Далее описывается, как генерируются эти новые события в броузерах, поддерживающих их. Когда вызывается метод send, один раз возбуждается событие «load-start». В ходе загрузки ответа сервера объект XMLHttpRequest возбуждает серию событий «progress», обычно каждые 50 миллисекунд или около того, которые можно использовать для обратной связи с пользователем, чтобы информировать его о ходе выполнения запроса. Если запрос завершается очень быстро, событие «progress» может и не возбуждаться. По завершении запроса возбуждается событие «load».

Завершение запроса не всегда означает успешное его выполнение, поэтому обработчик события «load» должен проверять код состояния в объекте XMLHttpRequest, чтобы убедиться, что был принят НТТР-код «200 ОК», а не «404 Not Found», например.

Существуют три разные ситуации, когда HTTP-запрос оканчивается неудачей, которым соответствуют три события. Если предельное время ожидания ответа истекло, генерируется событие «timeout». Если выполнение запроса было прервано, генерируется событие «abort». (О предельном времени ожидания и о методе abort подробнее рассказывается в 18.1.5.) Наконец, выполнению запроса могут препятствовРть другие ошибки в сети, такие как слишком большое количество переадресаций, и в этих случаях генерируется событие «error».