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

Флэнаган Дэвид

http://restaurantfinder.example.com/02134/1km/pizza

18.1.3.2. Запросы с данными в формате JSON

Использование формата представления данных форм в теле POST-запросов является распространенным соглашением, но не является обязательным требованием протокола HTTP. В последние годы в роли формата обмена данными во Всемирной паутине все большей популярностью пользуется формат JSON. Пример 18.7 демонстрирует, как с помощью функции

JSON.stringifу

(раздел 6.9) можно сформировать тело запроса. Обратите внимание, что этот пример отличается от примера 18.5 только последними двумя

строками.

Пример 18.7. Выполнение запроса HTTP POST с данными в формате JSON

function postJS0N(url, data, callback) {

var request = new XMLHttpRequest:

request.open("POST”, url); // Методом POST на указ, url

request.onreadystatechange = function { // Простой обработчик

if (request.readyState === 4 && callback) // При получении ответа

callback(request): // вызвать указанную функцию

};

request.setRequestHeader("Content-Type", "application/json");

request.send(JS0N.stringify(data));

}

18.1.3.3. Запросы с данными в формате XML

Иногда для представления передаваемых данных также используется формат XML. Данные в запросе информации о пиццерии можно было бы передавать не в формате представления данных форм и не в формате JSON представления JavaScript-объектов, а в формате XML-документа. Тело такого запроса могло бы иметь следующий вид:

<query>

<find zipcode="02134" radius="1km"> pizza </find>

</query>

Во всех примерах, встречавшихся до сих пор, аргументом метода

send

объекта

XMLHttpRequest

была строка или значение null. В действительности же этому методу можно также передать объект Document XML-документа. Пример 18.8 демонстрирует, как создать объект

Document

простого XML-документа и использовать его в качестве тела НТТР-запроса.

Пример 18.8. Выполнение запроса HTTP POST с XML-документом в качестве тела

// Параметры поиска "что", "где" и "радиус" оформляются в виде XML-документа // и отправляются по указанному URL-адресу. При получении ответа вызывает // указанную функцию

function postuery(url, what, where, radius, callback) {

var request = new XMLHttpRequest;

request.open("POST", url); // Методом POST на указанный url

request.onreadystatechange = function { // Простой обработчик

if (request.readyState === 4 && callback) callback(request);

};

// Создать XML-документ с корневым элементом <query>

var doc = document.implementation.createDocument("", "query", null);

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.