XML: основы

XML (eXtensible Markup Language) — текстовый формат для структурированных данных, где теги описываются самим разработчиком, в отличие от HTML с фиксированным набором тегов.

Зачем нужно

XML используется в legacy enterprise-системах, SOAP API, RSS-фидах, конфигурационных файлах (Maven, Android, SVG). Знание синтаксиса XML необходимо для интеграции со старыми банковскими и государственными API, для работы с SVG и парсинга сторонних источников данных.

Где используется

  • SOAP веб-сервисы (банки, государственные системы, SAP)
  • RSS и Atom — фиды новостей и подкастов
  • SVG — векторная графика в браузере
  • Конфигурационные файлы: Maven pom.xml, Android AndroidManifest.xml
  • Microsoft Office форматы (.docx, .xlsx внутри — ZIP с XML)

Синтаксис XML

<?xml version="1.0" encoding="UTF-8"?>
<!-- Декларация XML + комментарий -->

<users>
  <!-- Элемент с атрибутами -->
  <user id="42" role="admin">
    <name>Антон</name>
    <email>anton@example.com</email>
    <age>28</age>
    <tags>
      <tag>developer</tag>
      <tag>mentor</tag>
    </tags>
    <!-- Пустой элемент -->
    <avatar src="/images/42.jpg" />
  </user>

  <user id="43" role="viewer">
    <name>Мария</name>
    <email>maria@example.com</email>
    <!-- CDATA — текст с спецсимволами без экранирования -->
    <bio><![CDATA[Опыт в JS & TypeScript > 5 лет]]></bio>
  </user>
</users>

XML vs JSON

XML:
<user><name>Антон</name><age>28</age></user>   → 44 символа

JSON:
{"name":"Антон","age":28}                       → 24 символа

XML — многословнее, JSON — компактнее и нативнее для JS
XML — поддерживает атрибуты, комментарии, пространства имён
JSON — проще парсить в JavaScript

Работа с XML в JavaScript

// Парсинг XML строки в DOM
const parser = new DOMParser();
const xmlDoc = parser.parseFromString(xmlString, 'application/xml');

// Работа как с HTML DOM
const users = xmlDoc.querySelectorAll('user');
users.forEach(user => {
  const id = user.getAttribute('id');
  const name = user.querySelector('name').textContent;
  const email = user.querySelector('email').textContent;
  console.log({ id, name, email });
});

// Проверка ошибок парсинга
const error = xmlDoc.querySelector('parsererror');
if (error) console.error('XML невалиден:', error.textContent);

Fetch XML-ответа

async function fetchXML(url) {
  const res = await fetch(url, {
    headers: { Accept: 'application/xml, text/xml' },
  });
  const text = await res.text();
  const parser = new DOMParser();
  return parser.parseFromString(text, 'application/xml');
}

// RSS фид
const rssDoc = await fetchXML('https://habr.com/ru/rss/hubs/all/');
const items = rssDoc.querySelectorAll('item');
const articles = Array.from(items).map(item => ({
  title: item.querySelector('title').textContent,
  link: item.querySelector('link').textContent,
}));

Генерация XML (серверная сторона)

// Node.js: генерация XML вручную
function generateXML(users) {
  const items = users.map(u =>
    `  <user id="${u.id}">
    <name>${escapeXml(u.name)}</name>
    <email>${escapeXml(u.email)}</email>
  </user>`
  ).join('\n');

  return `<?xml version="1.0" encoding="UTF-8"?>\n<users>\n${items}\n</users>`;
}

function escapeXml(str) {
  return str
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;');
}

Частые ошибки

  • Не экранируют спецсимволы (<, >, &) — XML невалиден
  • Неправильно закрытые теги — XML строже HTML, все теги должны быть закрыты
  • Использование XML там, где достаточно JSON — лишняя сложность
  • Парсинг XML регулярками вместо DOMParser — антипаттерн

Связанные темы

Ресурсы