This acrticle at wikidot.com

JavaScript

X-Task: «On your Client! Get XML! Get XSL! Do XHTML! Go!»

Вступление

Статья рассматривает преобразование XML в XHTML посредством XSLT на клиенте средствами JavaScript. К примеру, у вас есть какие-либо данные в виде XML, а вам требуется по какому-либо действию клиента (по клику на ссылке), оформить их в [X]HTML и динамически вставить в страницу. Это не так сложно, но по пути, как оказалось, встречается несколько подводных камней — в основном, относительно кросс-браузерности этого подхода и малой освещённости процесса в сети. Генерация XHTML-страниц средствами браузера (прямой запрос на XML файл, содержащий информацию о стиле) — это другая тема, она намного проще, и здесь затронута не будет.

Задача будет рассмотрена на банальном примере личного сайта. Дано: Файл с контактными данными (XML), некая главная страница (XHTML) и пять браузеров: Firefox 3, Opera 9.5, IE7, Safari 3, Google Chrome. На главной странице есть ссылка, при нажатии которой контактные данные преобразуются в несортированный список (UL) и отображаются в специально выделенной области прямо на этой странице. Это реальный рабочий пример, который я сейчас использую для создания своего сайта (ещё не выложенного).

XML

Контактные данные, при их большом количестве, можно сгруппировать, поэтому XML-схема построена с учётом группировки элементов. Группа имеет краткое имя (shortname) для создания id у списка (возможно, потребуется оформить каждую группу по-особому) и, собственно, имя группы. XML-файл может содержать contact-ноды и вне групп, но в данном примере в этом нет необходимости. Все контакты имеют тип (type) для создания корректных ссылок в будущем (это мы также опустим). С остальным, вроде бы, всё понятно:

XML Schema

Структура довольно-таки проста, поэтому приведу сразу пример файла (любое сходство с реальными данными какого-либо индивидуума полностью случайно и приведено не намеренно):

  1. <?xml version=«1.0» encoding=«UTF-8»?>
  2. <?xml-stylesheet type=«text/xsl» href=«./contacts.xsl»?>
  3. <contacts
  4. xmlns=«http://any-developer.name&#187;
  5. xmlns:xsi=«http://www.w3.org/2001/XMLSchema-instance&#187;
  6. xsi:schemaLocation=«http://any-developer.name ./contacts.xsd&#187;>
  7. <group shortname=«messengers»>
  8. <name>Messengers</name>
  9. <contact type=«skype»>
  10. <id>any.developer</id>
  11. </contact>
  12. <contact type=«jabber»>
  13. <id>any.developer@jabber.org</id>
  14. <name>ulric.wilfred</name>
  15. </contact>
  16. <contact type=«gtalk»>
  17. <id>any.developer</id>
  18. </contact>
  19. <contact type=«yahoo»>
  20. <id>any.developer</id>
  21. </contact>
  22. <contact type=«icq»>
  23. <id>7484939304033345544</id>
  24. <name>any.developer</name>
  25. </contact>
  26. </group>
  27. <group shortname=«email»>
  28. <name>E-Mail</name>
  29. <contact type=«gmail»>
  30. <id>any.developer</id>
  31. </contact>
  32. <contact type=«yahoo-mail»>
  33. <id>any.developer</id>
  34. </contact>
  35. </group>
  36. </contacts>

XSL

Стиль генерирует XHTML-код, в виде списка UL, состоящего из негруппированных контактов и вложенных списков для групп. Поскольку результат вывода именно XHTML, требования к оформлению результата несколько строже, чем если бы это был обычный HTML. Поэтому следует обратить внимание на следующие моменты:

  • Важно: В результате преобразования должен получаться файл с одной и только одной корневой нодой, иначе Safari и Google Chrome (Читай: WebKit) не смогут добавить результирующий элемент в документ. Это довольно разумно, поскольку для всех XML объектов (результат в виде XHTML из их числа) есть правило: корневой элемент должен быть только один (There can be the only one).
  • Важно: В качестве xsl:output method должен быть указан либо xml либо html (однако, в последнем случае, при использовании пронстранств имён, таковые будут потеряны). Некоторые ставят это значение в xhtml и в результате получают некорректную обработку или ошибки на клиенте — пока этого метода не введено и не следует его использовать. Для этого есть media-type.
  • Код генерируется без заголовков XML: omit-xml-declaration установлен в yes и xmlns не указывается, иначе в результате получится недоXHTML-файл с XML-заголовком, не содержащий html, head и body. Генерация DOCTYPE (doctype-system, doctype-public) также отключена.
  1. <?xml version=«1.0» encoding=«utf-8»?>
  2. <xsl:stylesheet version=«1.0»
  3. xmlns:xsl=«http://www.w3.org/1999/XSL/Transform&#187;
  4. xmlns:c=«http://any-developer.name&#187; exclude-result-prefixes=«c»>
  5. <!—    xmlns=»http://www.w3.org/1999/xhtml» —&gt;
  6. <xsl:output method=«xml»
  7. encoding=«utf-8»
  8. standalone=«yes»
  9. indent=«yes»
  10. omit-xml-declaration=«yes»
  11. media-type=«text/xhtml»/>
  12. <!—
  13. doctype-system=»http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&#187;
  14. doctype-public=»-//W3C//DTD XHTML 1.0 Strict//EN»
  15. —>
  16. <xsl:template name=«contact»>
  17. <li><a href=«javascript:alert(‘{@type}’)» title=«{@type}»
  18. id=«contact-{@type}-sitelink»>
  19. <img alt=«{@type}» src=«{@type}.ico»
  20. id=«contact-{@type}-icon» class=«contact-icon» />
  21. </a>
  22. <xsl:if test=«c:name»>
  23. <a href=«javascript:alert(‘{@type}:{c:id}’);»
  24. id=«contact-{@type}-link» title=«{c:id}» alt=«{c:name}»
  25. class=«contact-link»>
  26. <xsl:value-of select=«c:name»/>
  27. </a>
  28. </xsl:if>
  29. <xsl:if test=«not(c:name)»>
  30. <a href=«javascript:alert(‘{@type}:{c:id}’);»
  31. id=«contact-{@type}-link» title=«{c:id}» alt=«{c:id}»
  32. class=«contact-link»>
  33. <xsl:value-of select=«c:id»/>
  34. </a>
  35. </xsl:if>
  36. <span class=«contact-type»>
  37. (<xsl:value-of select=«@type»/>)</span>
  38. </li>
  39. </xsl:template>
  40. <xsl:template match=«/c:contacts»>
  41. <ul id=«contacts»>
  42. <xsl:for-each select=«./c:contact»>
  43. <xsl:call-template name=«contact» />
  44. </xsl:for-each>
  45. <xsl:for-each select=«./c:group»>
  46. <li>
  47. <xsl:if test=«c:name»>
  48. <span class=«contact-group-name»>
  49. <xsl:value-of select=«c:name»/></span>
  50. </xsl:if>
  51. <ul id=«{@shortname}»>
  52. <xsl:for-each select=«./c:contact»>
  53. <xsl:call-template name=«contact» />
  54. </xsl:for-each>
  55. </ul>
  56. </li>
  57. </xsl:for-each>
  58. </ul>
  59. </xsl:template>
  60. </xsl:stylesheet>

В результате преобразования получается такой блок XHTML:

XML Rendering Result

JavaScript

Настало время выполнить само преобразование на стороне клиента. В этом абзаце придётся использовать немного больше хитростей, ввиду того, что каждый браузер предлагает это делать по-своему.

Загрузка XML-файлов

Для начала нам потребуется загрузить оба файла — XML и XSLT. По своей природе они оба — файлы XML, Internet Explorer предоставляет для этих целей ActiveX-объект XMLDOM, Firefox и Opera — фунцию createDocument, позволяющую загрузить XML-файл в созданный объект. Safari и Chrome (Читай: WebKit), однако, предоставляя эту же функцию, возвращают объект, не поддерживающий загрузку — опять же, вполне разумно, в соответствии со спецификациями W3C.

Метод 1. XMLHttpRequest

Поэтому, плюнув на всё, мы можем загружать файлы через XMLHttpRequest (синхронный или нет — по вашему выбору), используя всем известный шаблон AJAX.

Предложу вам свою версию, вы же можете использовать какую только заблагорассудится. Моя версия отличается тем, что принимает в параметры функцию, которая будет вызвана при успешном завершении вызова, позволяет делать и POST и GET запросы, позволяет передавать объекты и позволяет делать синхронный вызов (тогда она возвращает объект по его завершению).

  1. /**
  2. * Browser-independent [A]JAX call
  3. *
  4. * @param {String} locationURL an URL to call, without parameters
  5. * @param {String} [parameters=null] a parameters list, in the form
  6. *        ‘param1=value1&param2=value2&param3=value3’
  7. * @param {Function(XHMLHTTPRequest, Object)} [onComplete=null] a function that
  8. *        will be called when the response (responseText or responseXML of
  9. *        XHMLHTTPRequest) will be received
  10. * @param {Boolean} [doSynchronous=false] make a synchronous request (onComplete
  11. *        will /not/ be called)
  12. * @param {Boolean} [doPost=false] make a POST request instead of GET
  13. * @param {Object} [dataPackage=null] any object to transfer to the onComplete
  14. *        listener
  15. * @return {XHMLHTTPRequest} request object, if no exceptions occured
  16. */
  17. function makeRequest(locationURL, parameters, onComplete, doSynchronous, doPost, dataPackage) {
  18. var http_request = false;
  19. try {
  20. http_request = new ActiveXObject(«Msxml2.XMLHTTP»);
  21. } catch (e1) {
  22. try {
  23. http_request= new ActiveXObject(«Microsoft.XMLHTTP»);
  24. } catch (e2) {
  25. http_request = new XMLHttpRequest();
  26. }
  27. }
  28. //if (http_request.overrideMimeType) { // optional
  29. //  http_request.overrideMimeType(‘text/xml’);
  30. //}
  31. if (!http_request) {
  32. alert(‘Cannot create XMLHTTP instance’);
  33. return false;
  34. }
  35. if (onComplete && !doSynchronous) {
  36. completeListener = function() {
  37. if (http_request.readyState == 4) {
  38. if (http_request.status == 200) {
  39. onComplete(http_request, dataPackage)
  40. }
  41. }
  42. };
  43. http_request.onreadystatechange = completeListener;
  44. }
  45. //var salt = hex_md5(new Date().toString());
  46. if (doPost) {
  47. http_request.open(‘POST’, locationURL, !doSynchronous);
  48. http_request.setRequestHeader(«Content-type», «application/x-www-form-urlencoded»);
  49. http_request.setRequestHeader(«Content-length», parameters.length);
  50. http_request.setRequestHeader(«Connection», «close»);
  51. http_request.send(parameters);
  52. } else {
  53. http_request.open(‘GET’, locationURL + (parameters ? («?» + parameters) : «»), !doSynchronous);
  54. //http_request.open(‘GET’, ‘./proxy.php?’ + parameters +
  55. // «&salt=» + salt, true);
  56. http_request.send(null);
  57. }
  58. return http_request;
  59. }

При использовании этого метода, функция загрузки XML будет выглядеть довольно просто — например, так:

  1. /**
  2. * Loads any XML using synchronous XMLHttpRequest call.
  3. * @param {String} fileName name of the file to be loaded
  4. * @return {XMLDocument|Object}
  5. */
  6. function loadXML(fileName) {
  7. // no parameters, no handler, but synchronous
  8. var request = makeRequest(fileName, null, null, true);
  9. return request.responseXML;
  10. }

Метод 2. В зависимости от браузера

Однако, если вы хотите использовать именно те способы, которые (как ни забавно) рекомендуются на W3Schools, функцию loadXML придётся усложнить, потому что приведённые на W3Schoolds примеры не работают на браузерах WebKit (Читай: Safari и Chrome). Пусть это будет, так сказать, «рекомендованный вид». Подозреваю, правда, что все эти обходы скрывают под собой те же вызовы XMLHttpRequest, поэтому, если вы не сторонник неоправданных действий, пропустите этот раздел.

Итак, функция будет делать прямой синхронный вызов XMLHttpRequest (вернее, функции описанной в предыдущем разделе) только в случае вызова из Safari, в остальных же случаях прибегать к средствам конкретного браузера (Не забываем правило: Никаких прямых проверок браузера, только проверка, поддерживается ли вызываемая функция):

  1. /**
  2. * Loads any XML document using ActiveX (for IE) or createDocumentFunction (for
  3. * other browsers)
  4. * @param {String} fileName name of the file to be loaded
  5. * @return {XMLDocument|Object}
  6. */
  7. function loadXML(fileName) { // http://www.w3schools.com/xsl/xsl_client.asp
  8. var xmlFile = null;
  9. if (window.ActiveXObject) { // IE
  10. xmlFile = new ActiveXObject(«Microsoft.XMLDOM»);
  11. } else if (document.implementation
  12. && document.implementation.createDocument) { // Mozilla, Firefox, Opera, etc.
  13. xmlFile = document.implementation.createDocument(«»,«»,null);
  14. if (!xmlFile.load) { // Safari lacks on this method,
  15. // so we make a synchronous XMLHttpRequest
  16. var request = makeRequest(fileName, null, null, true);
  17. return request.responseXML;
  18. }
  19. } else {
  20. alert(‘Your browser cannot create XML DOM Documents’);
  21. }
  22. xmlFile.async = false;
  23. try {
  24. xmlFile.load(fileName);
  25. } catch(e) {
  26. alert(‘an error occured while loading XML file ‘ + fileName);
  27. }
  28. return(xmlFile);
  29. }

В результате, функция возвращает XML-объект по заданному имени файла. Можно приступать собственно к трансформации.

Преобразование через XSLT

Преобразованием будет заниматься ещё одна функция, которая будет принимать в качестве аргументов пути к XML-файлу и XSL-файлу. Загружать эти файлы она будет описанной выше функцией loadXML. А возвращать эта функция будет строку с XHTML-кодом, который можно будет вставить прямо в innerHTML нужного элемента.

Почему строку? Потому что метод transformFragment объекта XSLTProcessor не поддерживает рендеринг XML (xsl:output method="xml"), а поддерживает только HTML (xsl:output method="html"). В результате преобразования с xsl:output method="xml" и transformFragment генерируется корректный DocumentFragment, который, однако, при вставке в XHTML-код действует как некая XML-нода — поэтому визуально виден только, так называемый, plain text. Если вас не смущает потеря пространств имён, вы можете изменить xsl:output method на html и использовать transformFragment, добившись в результате, чтобы функция возвращала DocumentFragment.

В случае Internet Explorer используется функция transformNode XML-объекта, в остальных браузерах используется XSLTProcessor.

  1. /**
  2. * Applies specified XSL stylesheet to the specified XML file and returns
  3. * the result as a string. ActiveX is used in IE, otherwise, XSLTProcessor
  4. * is used.
  5. * @param {String} xmlFileName path to the xml file to be transformed
  6. * @param {String} xslFileName path to the xsl file to be applied to the xml
  7. * @return {String} xsl transformation result as a text
  8. */
  9. function getStylingResult(xmlFileName, xslFileName) {
  10. var xmlContent = loadXML(xmlFileName);
  11. var xslContent = loadXML(xslFileName);
  12. if (window.ActiveXObject) { // IE
  13. return xmlContent.transformNode(xslContent);
  14. } else if (window.XSLTProcessor) { // Mozilla, Firefox, Opera, Safari etc.
  15. var xsltProcessor=new XSLTProcessor();
  16. xsltProcessor.importStylesheet(xslContent);
  17. // return xsltProcessor.transformToFragment(xmlContent, document);
  18. // somehow, transformToFragment works incorrectly, recognizing the
  19. // result of transformation as xml, not html, because
  20. // xsl:output=»xhtml» is still not supported, and for xhtml
  21. // xsl:output=»xml» is used
  22. // (xsl:output=»html» strips namespaces)
  23. // see: http://osdir.com/ml/mozilla.devel.layout.xslt/2003-10/msg00008.html
  24. // also, see: https://developer.mozilla.org/en/Using_the_Mozilla_JavaScript_interface_to_XSL_Transformations
  25. var resultDocument = xsltProcessor.transformToDocument(xmlContent);
  26. var xmls = new XMLSerializer();
  27. return xmls.serializeToString(resultDocument);
  28. }
  29. }

Итог

Всё, весь необходимый код готов и вы можете использовать функцию getStylingResult для преобразования XML-файлов и вставки результата в XHTML. Например, таким образом:

  1. document.getElementById(‘content’).innerHTML =
  2. getStylingResult(‘./contacts.xml’, ‘./contacts.xsl’);

Как итог, мы получили действительно кросс-браузерную версию обработки XML на клиенте. Спасибо за внимание.

(Подсветка кода выполнена с помощью Syntax Highlighter от Антона Шевчука)

P.S. Статья доступна также в моём блоге

Реклама