XSLT - Клиентская часть

Если ваш браузер поддерживает XSLT, то он может быть использован для преобразования документа в XHTML.

Решение на JavaScript

В предыдущих главах мы рассказали вам, как использовать XSLT для преобразования XML-документа в XHTML. Мы完成了这项工作 следующим образом: добавили XSL-таблицу стилей к XML-файлу и преобразовали его через браузер.

Хотя этот метод работает хорошо, включение ссылки на таблицу стилей в XML-файл не всегда удовлетворительно (например, в браузерах, которые не поддерживают XSLT, этот метод не работает).

Более универсальным方法是 использовать JavaScript для выполнения преобразования.

Используя JavaScript, мы можем:

  • Проведение тестирования браузера
  • Использование различных таблиц стилей в зависимости от браузера и потребностей пользователя

Вот и заключается магия XSLT! Одной из целей дизайна XSLT является возможность преобразования одного формата в другой, а также поддержка различных типов браузеров и потребностей пользователей.

Преобразование XSLT на стороне клиента一定会 стать одной из основных задач, которые будут выполняться будущими браузерами, и мы также увидим его рост на конкретных рынках браузеров (глухонемые, сетевые принтеры, аудиоустройства и т.д.).

XML-файл и XSL-файл

Пожалуйста, посмотрите на этот XML-документ, который был представлен в предыдущих главах:

<?xml version="1.0" encoding="ISO-8859-1"?>
<catalog>
  <cd>
    <title>Empire Burlesque</title>
    <artist>Bob Dylan</artist>
    <country>USA</country>
    <company>Columbia</company>
    <price>10.90</price>
    <year>1985</year>
  </cd>
.
.
.
</catalog>

Просмотрите этот файл XML.

и связанными таблицами стилей XSL:

<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
<xsl:template match="/">
  <html>
  <body>
    <h2>Моя коллекция компакт-дисков</h2> 
    <table border="1">
      <tr bgcolor="#9acd32">
        <th align="left">Title</th> 
        <th align="left">Artist</th> 
      </tr>
      <xsl:for-each select="catalog/cd">
      <tr>
        <td><xsl:value-of select="title" /></td>
        <td><xsl:value-of select="artist" /></td>
      </tr>
      </xsl:for-each>
  </table>
  </body>
  </html>
</xsl:template>
</xsl:stylesheet>

Просмотрите этот файл XSL.

Обратите внимание, что этот XML-файл не содержит ссылок на файлы XSL.

Важно:Это означает, что XML-файл можно преобразовывать с использованием нескольких различных таблиц стилей XSL.

Преобразование XML в XHTML в браузере

Это код, используемый для преобразования XML-файла в XHTML на клиенте:

<html>
<body>
<script type="text/javascript">
// Load XML 
var xml = new ActiveXObject("Microsoft.XMLDOM")
xml.async = false
xml.load("cdcatalog.xml")
// Load XSL
var xsl = new ActiveXObject("Microsoft.XMLDOM")
xsl.async = false
xsl.load("cdcatalog.xsl")
// Transform
document.write(xml.transformNode(xsl))
</script>
</body>
</html>

Совет:Если вы не знаете, как писать JavaScript, изучите наш:Tutorial по JavaScript。

Первый код создает экземпляр XML-парсера Microsoft и загружает XML-файл в память. Второй код создает другой экземпляр парсера и загружает этот XSL-файл в память. Последняя строка кода использует XSL-документ для преобразования XML-документа и показывает результат в браузере в виде XHTML. Задача выполнена!

Посмотрите, как это работает в IE.