Чтение онлайн

на главную - закладки

Жанры

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

18.1.3.1. Запросы с данными в формате HTML-форм

Рассмотрим HTML-формы. Когда пользователь отправляет форму, данные в форме (имена и значения всех элементов формы) помещаются в строку и отправляются вместе с запросом. По умолчанию HTML-формы отправляются на сервер методом POST, и данные формы помещаются в тело запроса. Схема преобразования данных формы в строку относительно проста: к имени и значению каждого элемента формы применяется обычное URI-кодирование (замена специальных символов шестнадцатеричными кодами), кодированные представления имен и значений отделяются знаком равенства, а пары имя/значение - амперсандом. Представление простой формы в виде строки может выглядеть, как показано ниже:

find=pizza&zipcode=02134&radius=1km

Такой формат представления данных формы соответствует формальному MIME-типу:

application/x-www-form-urlencoded

Этот тип следует указать в заголовке «Content-Type» запроса при отправке данных такого вида в составе запроса методом POST.

Обратите внимание, что для использования такого формата представления не требуется наличие HTML-формы, и в действительности в этой главе мы не будем работать с формами непосредственно. В Ajax-приложениях чаще всего у вас будет иметься некоторый JavaScript-объект, который необходимо отправить на сервер. (Этот объект может быть создан из полей ввода HTML-формы, но в данном случае это не имеет значения.) Данные, показанные выше, могут оказаться представлением следующего JavaScript-объекта:

{

find: "pizza", zipcode: 02134, radius: "1km"

}

Формат представления данных форм настолько широко используется во Всемирной паутине и настолько хорошо поддерживается всеми языками программирования для создания серверных сценариев, что его применение для представления данных, никак не связанных с формами, часто оказывается наиболее простым и удобным. Пример 18.4 демонстрирует, как преобразовать свойства объекта в формат представления формы.

Пример 18.4. Преобразование объекта в формат для отправки в НТТР-запросе

/**

* Представляет свойства объекта, как если бы они были парами имя/значение

* HTML-формы, с использованием формата application/x-www-form-urlencoded */

function encodeFormData(data) {

if (!data) return // Всегда возвращать строку

var pairs = []; // Для пар имя/значение

for(var name in data) { // Для каждого имени

if (!data.hasOwnProperty(name)) continue; // Пропустить унаслед.

if (typeof data[name] === "function") continue;// Пропустить методы

var value = data[name].toString; // Знач, в виде строки

name = encodeURIComponent(name.replace(”%20”, "+”)); // Кодировать имя

value = encodeURIComponent(value.replace("%20". "+")); // Кодировать значение

pairs.push(name + "=” + value); // Сохранить пару имя/значение

}

return pairs.join('&’); // Объединить пары знаком & и вернуть

}

С помощью этой функции

encodeFormData
легко можно создавать утилиты, такие как функция
postData,
представленная в примере 18.5. Обратите внимание, что для простоты эта функция
postData
(и аналогичные ей функции в примерах ниже) не обрабатывает ответ сервера. При получении ответа она передает объект
XMLHttpRequest
целиком указанной функции обратного вызова. Эта функция обратного вызова сама должна проверять код состояния ответа и извлекать содержимое ответа.

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

function postData(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", // Установить "Content-Type"

"application/x-www-form-urlencoded");

request.send(encodeFormData(data)); // Отправить данные

} // в представлении форм

Данные формы также могут быть отправлены посредством GET-запроса, и когда цель формы состоит в том, чтобы определить параметры операции чтения, метод GET лучше соответствует назначению формы, чем метод POST. GET-запросы не имеют тела, поэтому «полезный груз» с данными формы отправляется серверу в виде строки запроса в адресе URL (следующей за знаком вопроса). Утилита

encodeFormData
может также пригодиться для отправки подобных GET-запросов, и пример 18.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-адреса, такого как показано ниже:

Поделиться:
Популярные книги

Катализ

Скаландис Ант
Фантастика:
научная фантастика
5.00
рейтинг книги
Катализ

Телохранитель Генсека. Том 2

Алмазный Петр
2. Медведев
Фантастика:
попаданцы
альтернативная история
6.25
рейтинг книги
Телохранитель Генсека. Том 2

Истребители. Трилогия

Поселягин Владимир Геннадьевич
Фантастика:
альтернативная история
7.30
рейтинг книги
Истребители. Трилогия

Газлайтер. Том 10

Володин Григорий
10. История Телепата
Фантастика:
боевая фантастика
5.00
рейтинг книги
Газлайтер. Том 10

На цепи

Уваров
1. На цепи
Старинная литература:
прочая старинная литература
5.00
рейтинг книги
На цепи

Старый, но крепкий 4

Крынов Макс
4. Культивация без насилия
Фантастика:
уся
фэнтези
5.00
рейтинг книги
Старый, но крепкий 4

Эволюционер из трущоб. Том 2

Панарин Антон
2. Эволюционер из трущоб
Фантастика:
космическая фантастика
попаданцы
5.00
рейтинг книги
Эволюционер из трущоб. Том 2

Геном хищника. Книга третья

Гарцевич Евгений Александрович
3. Я - Легенда!
Фантастика:
боевая фантастика
рпг
попаданцы
5.00
рейтинг книги
Геном хищника. Книга третья

Секретная история вампиров

Тертлдав Гарри Норман
Фантастика:
ужасы и мистика
альтернативная история
5.00
рейтинг книги
Секретная история вампиров

Последний Паладин. Том 4

Саваровский Роман
4. Путь Паладина
Фантастика:
фэнтези
попаданцы
аниме
5.00
рейтинг книги
Последний Паладин. Том 4

Наследие Маозари 2

Панежин Евгений
2. Наследие Маозари
Фантастика:
попаданцы
рпг
аниме
5.00
рейтинг книги
Наследие Маозари 2

Газлайтер. Том 29

Володин Григорий Григорьевич
29. История Телепата
Фантастика:
боевая фантастика
попаданцы
аниме
5.00
рейтинг книги
Газлайтер. Том 29

Первый среди равных

Бор Жорж
1. Первый среди Равных
Фантастика:
попаданцы
аниме
фэнтези
5.00
рейтинг книги
Первый среди равных

Я до сих пор царь. Книга XXXII

Дрейк Сириус
32. Дорогой барон!
Фантастика:
юмористическое фэнтези
аниме
попаданцы
5.00
рейтинг книги
Я до сих пор царь. Книга XXXII