Шрифт:
var query = doc.documentElement; // Элемент <query>
var find = doc.createElement("find"); // Создать элемент <find>
query.appendChild(find); // И добавить в <query>
find.setAttribute("zipcode", where); // Атрибуты <find>
find.setAttribute("radius”, radius);
find.appendChild(doc.createTextNode(what)); // И содержимое <find>
// Отправить данные в формате XML серверу.
// Обратите внимание, что заголовок Content-Type будет установлен автоматически,
request.send(doc);
}
Обратите внимание, что пример 18.8 не устанавливает заголовок «Content-Type» запроса. Когда методу
send
передается XML-документ, то объект XMLHttpRequest
автоматически установит соответствующий заголовок «Content-Type», если он не был установлен предварительно. Аналогично, если передать методу send
простую строку и не установить заголовок «Content-Type», объект XMLHttpRequest
автоматически добавит этот заголовок со значением «text/plain; charset=UTF-8». Программный код в примере 18.1 явно устанавливает этот заголовок, но в действительности для данных в простом текстовом виде этого не требуется. 18.1.3.4. Выгрузка файлов
Одна из особенностей HTML-форм заключается в том, что, если пользователь выберет файл с помощью элемента
<input type="file">
, форма отправит содержимое этого файла в теле POST-запроса. HTML-формы всегда позволяли выгружать файлы, но до недавнего времени эта операция была недоступна в прикладном интерфейсе XMLHttpRequest
. Прикладной интерфейс, определяемый спецификацией «ХНН2», позволяет выгружать файлы за счет передачи объекта File
методу send.
В данном случае нельзя создать объект с помощью конструктора
File:
сценарий может лишь получить объект File
, представляющий файл, выбранный пользователем. В броузерах, поддерживающих объекты File
, каждый элемент <input type="file">
имеет свойство files
, которое ссылается на объект, подобный массиву, хранящий объекты File
. Прикладной интерфейс буксировки (drag-and-drop) (раздел 17.7) также позволяет получить доступ к файлам, «сбрасываемым» пользователем на элемент, через свойство dataTransfer.files
события «drop». Поближе с объектом File
мы познакомимся в разделах 22.6 и 22.7. А пока будем рассматривать объект File
как полностью непрозрачное представление выбранного пользователем файла, пригодное для выгрузки методом send.
В примере 18.9 представлена ненавязчивая JavaScript-функция, добавляющая обработчик события «change» к указанным элементам выгрузки файлов, чтобы они автоматически отправляли содержимое любого выбранного файла методом POST на указанный адрес URL. Пример 18.9. Выгрузка файла посредством запроса HTTP POST
// Отыскивает все элементы <input type=”file"> с атрибутом data-uploadto
// и регистрирует обработчик onchange, который автоматически отправляет
// выбранный файл по указанному URL-адресу "uploadto". Ответ сервера игнорируется.
whenReady(function { // Вызвать эту функцию после загрузки документа
var elts = document.getElementsByTagName("input”); // Все элементы input
for(var і = 0; і < elts.length; i++) { // Обойти в цикле
var input = elts[i];
if (input.type !== ’'file") continue; // Пропустить все, кроме
// элементов выгрузки файлов
var url = input.getAttribute("data-uploadto"); // Адрес выгрузки
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, и передавать в виде тела запроса этот объект.