Пример техники 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

1-2-3 AJAX+DOM+JSON = Web-разботка становится интереснеера

Web-разработчики привыкли, что сценарии JavaScript в web-обозревателе
перегружаются вместе с HTML-документом. А перегрузка происходит
при путешествии по содержимому какого-либо сайта.
Таким образом: объекты, функции, переменные имели такое же время жизни,
как и отображаемый документ. Это делало работу сценариев JavaScript
похожими на сценарии серверной стороны, таких как PHP, Python, Perl.
Правда объекты, функции, переменные вообще живут только во время
исполнения сценария на сервере. А клиентский JavaScript пока отображается
страница способен на "диалог" с пользователем, например, обеспечивает
какой-нибудь визуальный эффект или проверяет поля формы.

1) Применение AJAX, как известно, позволяет делать
запросы к серверу без берегрузки документа, т.е. подкачивать данные.
В этом случае объекты JavaScript могут "жить" до тех пор
пока не будет закрыто окно браузера. Это делает web-страницу
больше похожим на настоящее приложение опереционной системы.
Их так и стали называть - web-приложения.
Иметь постоянно существующие объекты JavaScript на стороне
делает web-разработку гораздо интереснее и, даже, как-то серъезнее (IMG:style_emoticons/default/smile.gif) .

Современные браузеры имеют развитую объектную модель
документа(DOM), позволяющую легко манипулировать содержимым
документа. А формат представления данных JSON обеспечивает
легкий обмен структуированной информацией между клиентом и сервером.

Пример:


I Этап
На клиенскую часть загружается:
1. Объект обеспечивающий коммуникацию(AJAX)
2. Объект умеющий преобразовывать данные в отображаемый HTML
и собирать данные из HTML в JSON

II Этап
1. Дается запрос на получение данных(JSON)
2. Объект-разборщик преобразует JSON в HTML ипользуя
методы DOM(например createElement, createTextNode, appendChild)

||| Этап
После того, как были произведены какие-либо изменения
в отображаемой информации:
1. Производится сборка данных из HTML
и упаковывается в JSON
2. JSON отсылается на сервер

Замечание.
С сервера можно присылать не только какую-нибудь структуру данных,
но и целый объект(без методов конечно). Тогда после манипуляций
с аттрибутами этого объекта его можно отослать на сервер
где его состояние будет сохранено в БД.

Пример техники AJAX+DOM+JSON.

Обзор.
Данная техника использует формат представления
данных JSON, AJAX для доставки данных и
методы DOM при отображении даннх клиенту.

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

1) Создается экземпляр объекта-конструктора ajax и с помощью него
посылается запрос на сервер за JSON-данными(файл "menu.js").

2) После загрузки JSON вызывается функция onJsonLoad,
которая преобразует JSON-текст в объект и используя методы
DOM производит отображение данных согласно заданным правилам.

Примечание.
Для преобразования JSON-текста в JSON-объект используется
функция parseJSON из библиотеки проекта json.org.

Выводы.

Плюсы:
* Данные могут закачиваться по требованию.
* Формат JSON очень прост.

Минусы:
* Правила отображения данных жестко "вшиты" в код программы,
для отделения логики от представления необходимо применить
технику шаблонов.

Файлы:
index.html
menu.js