XSLT на стороне клиента

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

Преобразование при помощи JavaScript

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

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

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

Благодаря использованию JavaScript мы сможем:

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

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

XML файл и XSL файл

Взгляните на следующий XML документ, который уже фигурировал в предыдущих главах:


<?xml version="1.0" encoding="UTF-8"?>
<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="UTF-8"?>
<xsl:stylesheet version="1.0"
 xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">
   <h2>My CD Collection</h2>
   <table border="1">
     <tr bgcolor="#9acd32">
       <th style="text-align:left">Title</th>
       <th style="text-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>
</xsl:template>

</xsl:stylesheet>

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

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

Ниже представлен исходный код, который преобразовывает XML файл в XHTML на стороне клиента:


<!DOCTYPE html>
<html>
<head>
<script>
   function loadXMLDoc(filename) {
      if (window.ActiveXObject) {
         xhttp = new ActiveXObject("Msxml2.XMLHTTP");
      }
      else {
         xhttp = new XMLHttpRequest();
       }
       xhttp.open("GET", filename, false);
       try { xhttp.responseType = "msxml-document" } catch(err) {} // Helping IE11
       xhttp.send("");
       return xhttp.responseXML;
   }

   function displayResult() {
      xml = loadXMLDoc("cd_catalog.xml");
      xsl = loadXMLDoc("cd_catalog.xsl");
      // код для IE
      if (window.ActiveXObject || xhttp.responseType == "msxml-document") {
         ex = xml.transformNode(xsl);
         document.getElementById("example").innerHTML = ex;
      }
      // код для Chrome, Firefox, Opera и др.
      else if (document.implementation && document.implementation.createDocument) {
         xsltProcessor = new XSLTProcessor();
         xsltProcessor.importStylesheet(xsl);
         resultDocument = xsltProcessor.transformToFragment(xml, document);
        document.getElementById("example").appendChild(resultDocument);
      }
   }
</script>
</head>
<body onload="displayResult()">
   <div id="example" />
</body>
</html>

Пояснение

Функция loadXMLDoc() делает следующее:

  • Создает объект XMLHttpRequest
  • Используя методы open() и send() объекта XMLHttpRequest отправляет запрос на сервер
  • Получает с сервера запрошенные данные в формате XML

Функция displayResult() используется для отображения XML файла, преобразованного в соответствии с правилами XSL файла:

  • Загружает XML и XSL файлы
  • Проверяет, какой браузер у пользователя
  • Если Internet Explorer:
    • Используем метод transformNode(), чтобы применить таблицу стилей XSL к XML документу
    • Передаем преобразованный XML документ в заданный элемент (id="example")
  • Если другие браузеры:
    • Создаем новый объект XSLTProcessor и импортируем в него XSL файл
    • Используем метод transformToFragment(), чтобы применить таблицу стилей XSL к XML документу
    • Передаем преобразованный XML документ в заданный элемент (id="example")