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

Флэнаган Дэвид
Шрифт:

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».