Предлагаю сразу определиться с аббревиатурой. «XML» расшифровывается как
«Extensible Markup Language» (расширенный язык разметки), отсюда смело можно
сделать вывод, что это потомок HTML. Резонный вопрос: чем же не устраивал
разработчиков HTML и что послужило толчком для создания нового языка? Достаточно
вспомнить о предназначении HTML: визуальное представление данных. XML же
разрабатывался для их структурирования, на что его предок рассчитан не был. HTML
концентрируется на отображении данных и их внешнем виде, а XML — на описании
данных и их структуре. Отсюда следует, что XML не является заменой HTML. Перед
этими языками ставятся абсолютно разные задачи, хотя внешний вид кода
схож.
В прагматическом плане коротко определить XML можно как
кроссплатформенное, программно- и аппаратно-независимое средство для передачи
информации.
Как и его предок, новый язык («новый» — в сравнении с HTML,
так как XML был разработан года три назад) имеет свои тэги (tags), называемые
нодами. Разница лишь в том, что HTML имеет четко определенные тэги (<a>,
<p>, <h1> и т.д.), новые тэги появляются лишь по воле разработчиков
стандартов и браузеров. В XML совсем другая картина: количество
предустановленных (служебных) тэгов минимизировано, и программист волен
использовать собственные тэги и собственную структуру документа для хранения
данных.
Рассмотрим простой пример. Мы имеем стопку книг, которую нам
необходимо структурировать (т.е. разложить по полочкам). Что нам нужно для
характеристики книги? Ее автор, название, год издательства. Наш XML-документ
будет выглядеть следующим образом:
Заметьте,
в этом примере нигде не указано, как нужно отображать информацию (каким цветом,
шрифтом, размером шрифта и т.п.), а лишь показана структура документа: имеется
библиотека (<library>), в ней лежат книги (<book>), характеристиками
которых являются автор (<author>), название (<title>) и год
издательства (<year>).
Предлагаю разобраться с использованием
XML.
В классической HTML-разметке информация хранится внутри .html-файла.
Когда нам необходимо что-то изменить, мы должны работать одновременно и с
данными, и с правилами их отображения, что довольно неудобно. XML решает эту
проблему так: данные мы можем хранить в одном файле (XML), а правила их
представления — в другом (HTML). Однако XML позволяет хранить данные и внутри
HTML-файла — в островках данных (data islands). Тем не менее, информация
по-прежнему структурирована и отделена от правил визуального
представления.
XML позволяет обмениваться информацией несовместимым
системам. На сегодня существует множество стандартов хранения информации в
разных операционных системах и базах данных, что не позволяет обмениваться
информацией в разных системах. XML успешно решает эту проблему.
Помимо
того, XML хранится в обычных текстовых файлах, что позволяет разработчикам
различных языков программирования и операционных систем создавать разные
приложения на основе одного стандарта, доступного всем.
Однако не стоит
думать, что XML делает все что угодно. Он лишь дает возможность хранить данные,
а управлением данными занимаются языки программирования.
Вернемся к
нашему примеру. Прежде чем создать XML-документ, необходимо уяснить принципы
создания правильно сформированных XML-документов (well-formed).
Каждый
документ должен сообщать, что за тип данных он содержит. Для того чтобы
обработчик (программа, анализирующая документ, — в нашем случае браузер Internet
Explorer 5+) правильно обрабатывал XML-документ, первая строка указывает, что
документ сформирован по версии XML 1.0 и имеет кодировку windows-1251. Следующая
строка является корневым, первичным элементом документа ( root element),
является обязательным компонентом и сообщает разработчику, что содержит этот
документ (в нашем случае <library> говорит нам, что мы имеем дело с
библиотекой).
Не все элементы языка HTML требуют закрывающего тэга
(<br>, <hr> и т.п.) Синтаксис XML же требует обязательного закрытия
тэгов. Хотя есть и исключения: первая строчка нашего примера не имеет
закрывающего тэга. Это объясняется тем, что эта строка не выступает частью
документа и информации, а является заголовком.
XML-тэги регистрозависимы.
Т.е. тэги <author> и <Author> будут двумя разными тэгами;
соответственно, оба требуют закрывающих тэгов, идентичных открывающим, иначе
ошибка.
Так как XML предназначен для структурирования данных,
естественным условием является четкость вложения тэгов. Если в HTML можно было
написать <b><i>Текст</b></i>, то XML требует четкой
вложенности: <b><i>Текст</i></b>, иначе
ошибка.
Как уже упоминалось, XML-документ должен содержать корневой
элемент (тэг), в нашем случае это <library>.
Как и в HTML, в XML
тэги могут иметь атрибуты. Разница лишь в том, что значения атрибутов должны
обязательно заключаться в кавычки (<book language=“rus”>, но не <book
language=rus>), иначе ошибка.
Одновременно недостатком и преимуществом
HTML была его способность игнорировать двойные пробелы: если мы напишем «Это мой
текст», то в HTML он воспримется как «Это мой текст». В XML двойные пробелы не
игнорируются.
Зато по части комментариев к коду в XML ничем не отличается
от предка (<!--Комментарий-->).
Бывает, что необходимо хранить
специфическую информацию (например, программный код), содержащий значительное
число спецсимволов (<, >, &, ‘, “). Конечно, можно заменять эти
символы на escape-последовательности (<, >, &), однако это
неудобно, если нужно хранить целые функции. В XML можно заключать необходимые
данные в конструкцию <![CDATA[…]]>. Информация, которая хранится в этой
секции, не обрабатывается интерпретатором, потому ошибок не вызывает:
<script> <![CDATA[ function doThis (a, b) { if
(a<b && a<0) { return 1 } else { return
0 } } ]]> </script>
Примечательно,
что XML-документы могут дополняться, и это не влияет на работу программы,
обрабатывающей их. Если наша программа выводит нам автора и название книги, и мы
добавим в XML-документ еще одну характеристику книги (например, количество
страниц — <pages></pages>), это никак не отразится на работе
программы, ведь по-прежнему в характеристике книги будут присутствовать нужные
нам тэги — <author> и <title>.
В HTML мы имели кое-какое
представление о взаимосвязях между тэгами — например, <title> должен был
содержаться внутри тэга <head>. Так как XML имеет четко определенную
структуру, взаимосвязи также разграничиваются и характеризуют родительские и
дочерние элементы. В нашем примере тэг <book> является дочерним для тэга
<library> и родительским для тэгов <author>, <title>,
<year>.
Как и в HTML, в XML существует понятие содержимого тэгов,
только в более разграниченном виде. В HTML мы могли охарактеризовать тэг <a
href=” http://www.site.com”>Мой сайт</a> как тэг <а>, который
имеет атрибут href со значением http://www.site.com и содержимым тэга Мой сайт.
В XML речь идет о четырех типах содержимого: элементное (данный элемент (тэг)
содержит другие элементы (тэги)), смешанное (тэги и текст), простое (текст) и
пустое (тэг содержит только атрибуты и не имеет содержимого — <a href=“
http://www.site.com ”></a>). Если мы имеем дело с тэгами, которые не
имеют содержимого, для оптимизации кода лучше закрывать такие тэги прямо в
открывающем тэге (<book language=”rus”/> вместо <book
language=”rus”></book>).
Так как XML дает разработчику право
самостоятельно устанавливать тэги, существуют простые правила задания их
имен:
• имя тэга может содержать буквы, цифры и другие символы, кроме
пробела;
• имя не может начинаться с цифры или знака пунктуации;
•
имя не может начинаться со слова XML.
Также не следует использовать знак
-, так как в некоторых случаях это может вызвать ошибку программы, которая
обрабатывает XML-документ.
XML позволяет именовать тэги не только
латинскими буквами, однако я бы не рекомендовал пользоваться этой
возможностью.
На начальном этапе использования XML может возникнуть
вопрос, зачем использовать вложенные тэги, когда есть атрибуты? К примеру, можно
было записать нашу библиотеку так:
Да, это сокращает
код, однако необходимо помнить, зачем мы за это взялись — затем, чтобы
структурировать информацию. Такая запись не дает наглядного представления о
структуре данных, не дает возможности хранить больше одного значения в атрибуте
(в отличие от дочерних элементов), имеет худшую расширяемость.
Однако не
стоит вдаваться в крайности и с дочерними элементами. Необходимо продумать
структуру и обоснованно использовать и атрибуты, и дочерние
элементы.
Итак, мы создали наш первый XML-документ (файл с расширением
.xml). Как его просмотреть? Нет ли в нем ошибок? Все предельно просто: необходим
IE 5+ и двойной щелчок на XML-файле. Если документ сформирован без ошибок, он
отобразится в браузере, вы сможете видеть код с подсветкой синтаксиса и
возможностью разворачивать/сворачивать дочерние элементы. Если же в коде
допущены ошибки, вместо документа будет выдано сообщение об ошибке.
Перед
тем как говорить о манипуляциях с XML-документом, окончательно определимся с его
структурой. Вот конечный вид нашего файла:
В
примерах мы будем использовать внешний XML-файл, однако стоит сказать пару слов
про «островки данных» (data islands). С их помощью дается возможность хранить
XML-данные прямо в HTML-документе. Для этого XML-структура должна быть заключена
в тэги <xml id="library"></xml>, где атрибут id используется для
идентификации «островка» и использования его содержимого. «Островки» можно
подгружать и из внешних файлов: <xml id="library"
src="library.xml"></xml>. Интересным решением при управлении
XML-данными видится возможность слияния с HTML-правилами отображения информации.
В следующем примере показана возможность представления данных нашей
библиотеки:
Есть несколько методов работы с данными XML применительно к Интернету. Это CSS,
XSL и JavaScript. Рассмотрим их по порядку.
Возможность использования CSS
при работе с XML-документами очевидна: каскадные таблицы стилей позволяют лишь
задать стиль для отображения данных, но никак не манипулировать содержимым
документа. Хотя эта связка малопродуктивна, если есть желание, стоит лишь во
второй строчке XML-документа написать <?xml-stylesheet type="text/css"
href="main.css"?>. Структура .css-файла проста: имена стилей должны совпадать
с именами тэгов, для которых предназначены эти стили. Почему малопродуктивна? Да
просто XML приправлен своей аналогичной технологией — XSL, Extensible Stylesheet
Language («расширенный язык таблицы стилей»). Как видно из названия, это тоже
таблица стилей, хоть и с бо’льшими возможностями, нежели CSS. Однако и это не
верх совершенства. Для использования XSL во вторую строчку кода пишется
конструкция <?xml-stylesheet type="text/xsl"
href="main.xsl"?>.
Теперь поговорим о JavaScript, хоть и не идеальном
в плане скорости работы, однако, на мой взгляд, оптимальном средстве для
обработки XML-данных в браузерах.
Как может использоваться XML и чем он
может нам помочь? Использоваться — повсеместно, помочь же он может не только в
структуризации контента, но и в экономии трафика и оптимизации размеров
документов. Допустим, нам надо создать меню для сайта. XML-документ будет
выглядеть так:
Напомню,
что указанные в статье примеры не идеальны — возможно, у вас получится более
выгодная структура, однако в качестве примера будем использовать эту. Итак, что
характеризуют тэги <title> и <link>, думаю, ясно — скажу лишь, что
тэг <style> сообщает нам, какой стиль CSS используется для этого пункта
меню (естественно, эти стили должны быть созданы в .css-файле).
Корневой
тэг содержит атрибут onmouseover со значением mouseOver1(). Этот атрибут говорит
о том, какая JavaScript-функция будет вызываться при наведении мышки на пункт
меню. Однако последний пункт меню имеет свой атрибут onmouseover с другим
значением. Это сделано затем, чтобы иметь возможность назначать, к примеру,
разные обработчики событий для разных пунктов меню (CSS-стиль у этого пункта
меню тоже отличается от двух предыдущих). Итак, когда мы будем формировать меню,
мы будем устанавливать параметры наших пунктов. В первых двух пунктах мы не
найдем обработчика события (onmouseover), из чего сделаем вывод, что его следует
искать на уровне выше, т.к. он, получается, общий для этих элементов. Это
делается с целью экономии кода и трафика. Но т.к. третий пункт у нас отличается
(нам так вздумалось), обработчик у него будет другой — мы его явно и
указали.
Итак, попробуем загрузить в нашу JavaScript-программу
XML-документ, сформировать из него меню и выдать пользователю. Для вставки меню
предлагаю использовать слой (<div>). Предлагаю пробежать глазами следующий
код и обсудить его построчно:
<html> <head> <title>Меню</title> <meta
http-equiv="Content-Type" content="text/html;
charset=windows-1251"> <link href="main.css" rel="stylesheet"
type="text/css"> <script language="JavaScript"> function
makeMenu() { var xmlMenu=new
ActiveXObject("Microsoft.XMLDOM"); xmlMenu.async="false"; xmlMenu.load("menu.xml"); nodes=xmlMenu.documentElement.childNodes; content='<table
width="150" border="0">'; for (a=0; a<nodes.length; a++)
{ mouseOver=nodes.item(a).getAttribute("onmouseover"); if
(mouseOver==null) { mouseOver=
xmlMenu.documentElement.getAttribute("onmouseover"); } for (b=0;
b<nodes.item(a).childNodes.length; b++) { if
(nodes.item(a).childNodes.item(b).nodeName=='title')
{ title=nodes.item(a).childNodes.item(b).text; } else if
(nodes.item(a).childNodes.item(b).nodeName=='style')
{ style=nodes.item(a).childNodes.item(b).text; } else if
(nodes.item(a).childNodes.item(b).nodeName=='link')
{ link=nodes.item(a).childNodes.item(b).text; } } content+='<tr><td><a
href="' + link + '"
class="' + style + '"
onmouseover="' + mouseOver + '">' +
title + '</a></td></tr>'; } content+='</table>'; document.all.menu.innerHTML=content; } </script> </head> <body> <a
href="#" onclick="makeMenu()">Сформировать
меню</a><br><br> <div
id="menu"></div> </body> </html>
Итак,
анализируем функцию makeMenu(). Первая строка создает объект, в который мы будем
загружать XML-документ. Вторая строка сообщает, что обработка XML-документа
начнется только после его полной загрузки. Дальше мы говорим, какой файл
загружать. После присваиваем переменной nodes структуру дочерних элементов
корневого тэга. То есть, в переменной nodes содержится все, что находится у нас
внутри тэга <menu></menu> в нашем XML-документе. Именно параметр
childNodes указывает на то, что мы желаем работать с дочерними нодами корневого
элемента (xmlMenu — это созданный нами объект, в который загружен XML-файл;
documentElement — корневой элемент; childNodes — дочерние элементы текущей
ноды). После этого переменной content, в которую мы и будем записывать
сформированное меню, мы присваиваем начальное значение в виде тэга открытия
таблицы (впоследствии мы будем дописывать строки таблицы, а в конце поставим
закрывающий тэг </table>). Далее запускаем цикл, количество оборотов
которого соответствует количеству дочерних нод корневого элемента
(nodes.length). После мы пытаемся присвоить переменной mouseOver значение
атрибута onmouseover текущей ноды: nodes.item(a) определяет текущий элемент — в
скобках указывается индекс (порядковый номер начиная с нуля) дочерней ноды в
текущей родительской ноде, т.е. в ноде <menu> мы перебираем дочерние ноды
<unit>, а выражение nodes.item(0), nodes.item(1), nodes.item(2) указывает
на каждую из нод <unit> соответственно. Если в текущей ноде мы не нашли
значения атрибута onmouseover, мы поднимаемся на уровень выше, в родительскую
ноду, и смотрим там (это было предусмотрено нами при создании XML-файла). Для
ноды <unit> нам необходимо просмотреть дочерние ноды и вывести оттуда
необходимые нам данные (текст ссылки, саму ссылку и ее стиль). Поэтому мы
спускаемся на уровень ниже и сообщаем, что хотим просмотреть дочерние ноды
текущей ноды (текущая нода — <item>): nodes.item(a).childNodes. Проходит
цикл (три раза, т.к. у нас три параметра — три ноды), после чего мы имеем нужные
значения в переменных title, link и style, а затем добавляем в переменную
content строчку таблицы с пунктом меню. Атрибут nodeName текущей ноды возвращает
имя тэга (title, style, link), а атрибут text — содержимое ноды (О нас, menu1,
about.html). В конце закрываем таблицу и вставляем в слой (<div>) значение
переменной content. Вот наше меню и готово.
Естественно, если меню
состоит всего из трех элементов, такая схема невыгодна ни по скорости, ни по
объему загружаемой информации, однако если число пунктов перевалит за дюжину, мы
будем в выигрыше. Помимо считывания, JavaScript позволяет добавлять и удалять
ноды, изменять атрибуты. Для добавления ноды необходимо указать
следующее:
newnode=xmlMenu.createElement("newnodename"); newtext=xmlMenu.createTextNode("Содержимое
новой
ноды"); newnode.appendChild(newtext); xmlMenu.documentElement.appendChild(newnode);
Newnodename
— это имя тэга для создания ноды. Для установки атрибута используем следующий
код:
При разработке
приложений для внутреннего использования (в локальной сети) размер .xml-файла
большой роли не играет. Но необходимо помнить, что скорость интернет-соединения
недостаточно высока, чтобы можно было забыть о возможности оптимизации
XML-документов (даже если скорость позволяет, зачем же неоправданно увеличивать
трафик?) Можно иметь две версии .xml-файла: одну для разработки и ориентирования
в структуре, другую (сокращенную) — для пользователей. Существенно сэкономить
можно на именах тэгов. Не стоит злоупотреблять длинными значениями атрибутов.
Вот как бы мог выглядеть наш .xml-файл, выложенный и Интернете:
Такая
структура значительно экономит трафик; вдобавок, мы имеем полную версию — для
ориентирования в структуре.
Используйте сокращения и в JavaScript.
Например, достаточно часто в коде используется объект document.all. Его запросто
можно присвоить переменной: DA=document.all, и потом использовать в конструкциях
типа DA.menu.innerHTML=content.
Старайтесь писать имена нод и атрибутов и
нижнем регистре, во избежание недоразумений (ноды
регистрозависимы).
