Пример запроса 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>

В функции 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