Главная страница статей --> Советы по фотошопу, графике и хитрости в построении php кода

Язык XML

Источник: realcoding.net

[2 страница]
Есть несколько методов работы с данными 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-документ будет выглядеть так:

<?xml version="1.0" encoding="windows-1251"?>
<menu onmouseover=“mouseOver1()”>
<unit>
<title>О нас</title>
<style>menu1</style>
<link>about.html</link>
</unit>

<unit>
<title>Контакты</title>
<style>menu1</style>
<link>contacts.html</link>
</unit>

<unit onmouseover=“mouseOver2()”>
<title>Партнеры</title>
<style>menu2</style>
<link>partners.html</link>
</unit>
</menu>

Напомню, что указанные в статье примеры не идеальны — возможно, у вас получится более выгодная структура, однако в качестве примера будем использовать эту. Итак, что характеризуют тэги <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 — это имя тэга для создания ноды. Для установки атрибута используем следующий код:

nodes.item(a).setAttribute("newattribute")=“Значение атрибута”;

Newattribute — имя создаваемого атрибута.

Напоследок позвольте пару советов.

При разработке приложений для внутреннего использования (в локальной сети) размер .xml-файла большой роли не играет. Но необходимо помнить, что скорость интернет-соединения недостаточно высока, чтобы можно было забыть о возможности оптимизации XML-документов (даже если скорость позволяет, зачем же неоправданно увеличивать трафик?) Можно иметь две версии .xml-файла: одну для разработки и ориентирования в структуре, другую (сокращенную) — для пользователей. Существенно сэкономить можно на именах тэгов. Не стоит злоупотреблять длинными значениями атрибутов. Вот как бы мог выглядеть наш .xml-файл, выложенный и Интернете:

<?xml version="1.0" encoding="windows-1251"?>
<m omo=“mOver1()”>
<u>
<t>О нас</t>
<s>menu1</s>
<l>about.html</l>
</u>
</m>

Такая структура значительно экономит трафик; вдобавок, мы имеем полную версию — для ориентирования в структуре.

Используйте сокращения и в JavaScript. Например, достаточно часто в коде используется объект document.all. Его запросто можно присвоить переменной: DA=document.all, и потом использовать в конструкциях типа DA.menu.innerHTML=content.

Старайтесь писать имена нод и атрибутов и нижнем регистре, во избежание недоразумений (ноды регистрозависимы).

Успехов!

Контакты
Редакция:
[0.001]