НЕ МОЛЧИ!!!    Сделай что-нибудь, чтобы остановить войну России в Украине.
Иначе завтра ТЫ будешь следующим!

Пример запроса AJAX XML

Пример AJAX запроса с передачей данных в формате XML

Рассказывается об использовании AJAX запросов для передачи сложных структур данных, описан пример передачи структурированной информации и немного об XML формате.

Приводимый пример во многом повторяет предыдущий, приведенный в статье Пример AJAX запроса, посвященный использованию AJAX технологии, поэтому более детальное описание можно смотреть там. А в этой и следующей статье приводятся примеры передачи структурированной информации с применением AJAX и немного об используемых форматах.

XML формат

XML (eXtensible Markup Language — расширяемый язык разметки) представляет собой текстовое описание информации с помощью набора правил. Этот формат наиболее часто применяется для описания каких-либо сложных структурированных данных и поэтому удобен для взаимодействия между приложениями и даже между различными платформами. О его достоинствах и недостатках здесь говорить не будем, а приведем пример описания ресторанного заказа.

<?xml version="1.0"?>
<order number="123">
<item>
<name>Суп харчо</name>
<value>300 г</value>
<count>2</count> <price>$2.00</price> <note></note>
</item>
<item>
<name>Шашлык из свинины</name>
<value>400 г</value>
<count>2</count>
<price>$10.00</price>
<note>Время приготовления не более 30 мин.</note>
</item> </order>
Приведенная строка и есть XML формат описания данных. Нетрудно догадаться, что XML удобен в первую очередь для для хранения и переноса сложных данных, например, различных объектов, содержимого баз данных. Поскольку такое описание универсально и не зависит от операционной системы, его удобно использовать для обмена между различными приложениями и платформами.

 

Реализация AJAX запроса в XML формате

Давайте теперь отправим наш заказ AJAX запросом на сервер, чтобы он подсчитал его  стоимость. Ниже приведен код запроса.

Ответ сервера:  
 

В функции handle() — обработчике клика кнопки «Отправить» мы считываем заказ, проверяем его на ошибки ввода и передаем в основную функцию sendData для отправки на сервер.

/**
* обработчик клика на кнопке Отправить
*/ function handle()
{
var order = getOrder();
var xml = checkData(order);
sendData(xml);
}

Ниже приведен код основной функции, осуществляющей AJAX взаимодействие с сервером. Как видите, все стандартно, единственное в заголовке серверу сообщается, что информация передается в кодировке UTF-8 и формате XML. Функция getData() отслеживает изменение состояние запроса и отображает ответ сервера на странице.

function sendData(xmlstr)
{
   var request = new XMLHttpRequest();
   var url = "http://webdesignstudio1.net/путь_к_серверному_скрипту/getXML.php";
   request.open("POST", url, true);
   request.setRequestHeader("Content-Type", "text/xml");
   request.setRequestHeader("Accept-Charset", "UTF-8");
   request.addEventListener("readystatechange", () => {
      getData(request);
   });
   request.send(xmlstr);
}

Изменений по сравнению с примером предыдущей статьи немного. Во-первых, данные на сервер отправляются методом POST, о чем и указано в параметрах метода xmlHttp.open, Можно использовать и GET, но как правило XML используется для передачи достаточно длинных сообщений, кроме того, он сам существенно увеличивает сообщение, поэтому, чтобы не превысить ограничения на длину сообщения, лучше использовать POST. Также в методе xmlHttp.setRequestHeader мы сообщаем серверу, что отправляем данные в XML формате и указываем кодировку символов. Любое изменение состояния запроса request отслеживается функцией getData(). Данные отправляются не через адресную строку, а в теле запроса, поэтому методу xmlHttp.send(xmlstr) в параметрах надо явно передать строку для отправки.

Прием отклика сервера ничем не отличается от обработки обычных текстовых данных, поскольку мы «договорились» с сервером работать в XML. Хочу обратить внимание, поскольку запрос асинхронный, то «ловить» ответ надо только здесь, ожидая, когда переменные состояния запроса установятся в нужное состояние.

function getData(request)
{
    var response = document.getElementById("response");
    
    if (request.readyState === 4 && request.status === 200) {
         response.innerHTML = request.response;
    }
}

P.S. Здесь, конечно, приведен пример простейшего взаимодействия с использованием AJAX технологии, различные обвязки, проверки намеренно опущены и оставлены на откуп пользователю.
Кроме того, используемый формат имеет достаточно много недостатков, но о них тоже умалчивавется — ведь мы разбирали пример использования AJAX в формате XML. Сейчас намного чаще для обмена используется другой формат описания JSON, работа с ним описывается в следующей статье этой рубрики Пример запроса AJAX JSON