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

* 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”, "+”)); // Кодировать имя

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

 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-адреса, такого как показано ниже:

<a href="http://restaurantfinder.example.com/02134/1km/pizza"><b>http://restaurantfinder.example.com/02134/1km/pizza</b></a>

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