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

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

Пример 18.6. Выполнение GET-запроса с данными в формате представления форм

function getData(url, data, callback) {

var request = new XMLHttpRequest;

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

"?" + encodeFormData(data)); // с добавлением данных

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

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

};

request.send(null); // Отправить запрос

}

Для добавления данных в URL-адреса HTML-формы используют строки запросов, но использование объекта

XMLHttpRequest
дает свободу представления данных.

При наличии соответствующей поддержки на сервере наш запрос на поиск пиццерии можно оформить в виде более удобочитаемого URL-адреса, такого как показано ниже:

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);