пятница, 21 декабря 2007 г.

Пример техники XML+XSLT+AJAX

Обзор.
Данная техника использует перобразование
данных формата XML в представление HTML
используя JavaScript в браузере клиента.


Как это делается.

1) Данные записываются в файл формата XML.
В нашем случае, это список книг.

2) Способ преобразования XML в HTML записывается
в файл XSLT. То есть делается разделение представления
от данных.

3) На клиент загружается сценарий JavaScript,
который состоит из следующих компонентов:

а) Функция ajax - для получения данных с сервера.
В зависмости от браузера используются различные
объекты для использования AJAX.
Internet Explorer:
xmlDoc = new ActiveXObject("Microsoft.XMLHTTP")
Mozilla/Opera:
xmlDoc = new XMLHttpRequest()
б) Функция xsltProcessor - создает объект разборщика XML
Для разных браузеров различные объекты:
Internet Explorer:
var xsldoc = new ActiveXObject("Microsoft.XMLDOM")
Mozilla/Opera:
var xsltProcessor = new XSLTProcessor()

Причем для доставки XSLT в случае Mozilla/Opera используем
функцию ajax, я для IE метод load объекта Microsoft.XMLHTTP.

По адресу http://www.w3schools.com/xml/xml_parser.asp
можно найти пример другого кросс-браузерного решения.

в) Подфункцию _onXslLoad, которая выполняется после загрузке XSLT.
_onXslLoad применяет правила XSLT к XML и в результате получается
HTML, который размещается на странице.


Рисунок 1 - UML Sequence Diagram

Выводы.
Плюсы:
* Разделение представления с данными и логикой является важным преимуществом.
* Возможность делать преобразования данных в представление на клиенте позволяет
делать динамические станицы без сервера приложений.
* Сокращение объема передаваемых данных.

Минусы:
* Нет "шаблонов" в привычном понимании, т.е. HTML-файлов с какой-либо разметкой для
размещения данных. Для изменения внешнего вида нужен дизайнер со знанием HTML-XML-XSLT,
а в случае традиционных шаблонов возможно использование редактора HTML типа MS FrontPage,
Adobe Dreamweaver и т.д.
* Возрастает нагрузка на браузер клиента.

Файлы:
index.htm
menu.xml
menu.xsl

Комментариев нет: