Pull to refresh

Решение проблем обработки XSLT на стороне клиента

Reading time 3 min
Views 6.8K
Вы уже используете XSLT в качестве шаблонизатора на сервере. Настал черёд перенести xsl-трансформацию на клиента. Можно, например, воспользоваться способом описанным в статье На клиенте! Получить XML! Получить XSL! Сделать XHTML! Марш!. Но это было бы слишком просто, потому что каждый браузер добавляет несколько своих нюансов при работе с XSLT.

Вопросы о способе загрузки xsl- и xml-файлов и их обработки в различных браузерах был рассмотрен в указанной выше статье. Рассмотрим другие вопросы:
1) инклудинг;
2) кеширование;

Все примеры опубликованы на этой странице ra-project.net/xsl_tests и работают в браузерах Opera, Chrome, IE6, Firefox, Safari.

Инклудинг


Простая инструкция вида
<xsl:include href="common/forms.xsl"/>,
которая превосходно работает в случае xsl-трансформации на сервере, при разборе в некоторых браузерах не будет корректно обработана. Все браузеры смогут подгрузить дополнительный xsl-файл если к нему указан полный URL. Например такой:
<xsl:include href="http://site.com/xsl/common/forms.xsl"/>.

Можно в xsl-файлах, которые будут подгружаться браузером, прописывать полные пути. Но тогда теряется элегантность решения. Да и не всегда мы знаем наверняка на каком домене будет крутиться сайт. Поэтому прежде чем делать трансформацию на клиенте, необходимо с помощью javascript заменить относительные пути на абсолютные.

В примере "Тест инклудинг" обрабатывается одинарный инклуд. Здесь основной xsl-файл 1.xsl подгружает дополнительный файл-разметки 1_1.xsl.

В примере "Тест двойной инклудинг" обрабатывается двойной инклуд. Здесь основной xsl-файл 2.xsl подгружает 2_1.xsl, который в свою очередь обращается к ещё одному xsl-файлу 1_1.xsl.

Кеширование


Firefox, Chrome и Opera по умолчанию кешируют загруженные файлы, так же как обычные медиа-файлы. Так, что если обновить страницу сайта, то кеш потеряет актуальность и файлы будут загружены с сети заново.

Иначе поступает IE. Он кеширует эти данные раз и навсегда (на продолжительное время), так что даже после обновления страницы браузер будет в твёрдой уверенности, что ранее загруженные файлы не потеряли своей актуальности. Единственный вариант обновить данные — очистить кеш браузера вручную.

Поэтому если нам необходимо, чтобы на сайте отображались актуальные данные, которые приходят к нам в виде xml, то необходимо дописывать постфикс. Например так ra-project.net/xsl_tests/res/1.xml?_1234567890666. А само кеширование реализовать на javascript. То же касается и файлов-трансформации. Например, на этапе разработки, мы хотим чтобы наш браузер всегда оперировал «свежей» версией xsl-файла, а на продакшине можно даже позволить браузеру закешировать этот xsl-файл.

В примере "Тест инклудинг" можно «поиграть» настройками кеширования. Результаты работы настроек можно пронаблюдать с помощью средств отладки: Firebug, Dragonfly, Developer Tools.

Использованные инструменты


Для xsl-трансформации на стороне клиента, я использовал плагин к jQuery Transform, в котором были добавлены функции кеширования и доработан механизм инклудинга. Доработаный вариант можно взять здесь ra-project.net/xsl_tests/jquery.transform.js.

Не рассмотренные вопросы


Остались ещё 2 не рассмотренных вопроса:
1) отладка при ошибках загрузки и трансформации;
2) проблема обработки инструкции disable-output-escaping=«yes» в firefox.
О них в другой раз.

UPD. Реальный работающий пример использования данной техники.
juick.ra-project.net/stats#ra
Здесь выводится статистика постов по месяцам. При клике на определённый месяц подгружаются xml-данные месяца и xsl-файл. Причём xsl-файл будет загружен лишь один раз. А xml-данные кешируются, поэтому если «гулять» по списку месяцев, то однажды загруженные данные не будут вновь браться с сервера, а возьмутся из кеша.
Tags:
Hubs:
+27
Comments 40
Comments Comments 40

Articles