Как подключить xml файл в html

Обновлено: 07.07.2024

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

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

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

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

Стиль генерирует XHTML-код, в виде списка UL, состоящего из негруппированных контактов и вложенных списков для групп. Поскольку результат вывода именно X HTML, требования к оформлению результата несколько строже, чем если бы это был обычный 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) также отключена.

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

JavaScript

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

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

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

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

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

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

В результате, функция возвращает 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.

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

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

Знакомство с технологией XML. Изучение возможности представления документов XML в HTML. Использование скриптов JavaScript для навигации по таблице XML и организации поиска данных по условию. Рекомендуемая литература [4, 13, 16].

Краткие теоретические сведения

Технология XML (eXtensible Markup Language) была создана в конце 90-х годов прошлого столетия. Основные достоинства текста XML:

□ имеет структуру базы данных, доступен ЭВМ и человеку;

□ удобно обрабатывается средствами современных языков программирования;

□ легко переводится в HTML.

Рассмотрим следующий пример текстовой базы данных, написанной на XML:

<title> Three men in the boat</title>

<title> Notre Domme de Paris</title>

<title> А War and Peace</title>

<title> Angelika — the misstress of ghosts</title> <author> А and S. Gallen</author>

Это пример правильно составленного документа XML, элементами которого являются теги <root>, <notes>, <book>, <title>, <author>, <price>.

Элементы в тексте расположены по типу дерева с головным элементом <root>. Каждьтй элемент имеет сопряженный с ним закрывающий элемент. Область действия каждого элемента ограничена открывающим и закрывающим элементами. Не допускается пересечения области действия элементов, т. e. области либо вложены одна в другую, либо вовсе не пересекаются. Элемент <root>, область действия которого содержит области действия всех других элементов, называется корневым. XML-документ можно рассматривать как текстовую базу данных. Значением элемента является информация, помещенная между тегами, определяющими данный элемент. Так, значением первого элемента <titie> является строка

Three men in the boat.

Наберите этот текст в любом редакторе и сохраните его как простой текстовый файл с расширением xml — например, дайте этому файлу имя textbd.xml. Можно просмотреть этот файл браузером Internet Explorer так же, как вы просматривали HTML-файлы. В случае ошибки интерпретатор XML выдаст подробную информацию о дислокации и сути ошибки.

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

Листинг 2.12. HTML-документ для отображения таблицы XML

<hl> Our first lesson in xml-technology</hl>

Сохраним этот HTML-файл под именем textbd.html. Теперь откроем его браузером. Результат будет таким (рис. 2.9).

Рис. 2.9. Отображение документа XML в документе HTML

Для подключения созданного ранее XML-файла и связывания его с таблицей используются теги:

Для отображения данных в таблице используются теги для ячеек в следующем виде:

Тег <SPAN> используется в качестве контейнера. Параметр DATAFLD содержит значение отображаемого элемента XML.

При работе с базами данных одним из основных вопросов является поиск требуемой информации. В этой работе осуществим такой поиск с помощью средств JavaScript. Поскольку база может быть достаточно большой, то вывод ее целиком в таблице HTML- документа очень неэффективен. Поэтому будем отображать не всю таблицу, а, скажем, только две записи. Кроме того, поставим кнопки, чтобы листать базу <вверх-вниз>. Для этого изменим наш HTML-документ следующим образом (листинг 2.13).

Листинг2.13. Модифицированный HTML-документ для отображения таблицы XML

<hl> Our first lesson in xml-technology</hl>

Терм &gt используется для прорисовки стрелки вправо, терм &it — стрелки влево. При этом указываем, что нужно отображать только две записи в таблице:

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

Эта команда возвращает значение элемента <titie> из XML-файла, который является i-м по порядку перечисления этих элементов <titie>.

Эта команда возвращает общее число элементов <titie> из ХМ L-документа.

Эта команда возвращает позицию, с которой строка stringi входит в строку string либо -i, если вхождений нет.

Теперь приведем расширенный HTML-код для этой задачи (листинг 2.14).

Листинг2.14. Расширенный HTML-документ для отображения таблицы XML

var odoc=new ActiveXObject("Microsoft.XMLDOM");

odoc.async=false; // Приостановка программы,

// пока загрузка не завершится odoc.load("textbd.xml"); // Загрузка XML-документа в память var stringl=document.myform.mytext.value; z=odoc.getElementsByTagName("title").length;// Получение

// длины элемента // с тегом // <title>

for(i=0;i<z;i++) // Цикл для проверки на совпадение // указанного названия и названий, содержащихся // в теге <title> считанного XML-документа

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

При связывании данных вы соединяете XML -документ с HTML -страницей, а затем встраиваете стандартные HTML -элементы, такие как SPAN или TABLE , в отдельные XML -элементы. HTML -элементы затем автоматически отображают содержимое XML -элементов, в которые они встроены.

Связывание данных, как и другие методы, о которых вы узнаете в этой лекции, работает только с XML -документом, который симметрично структурирован, например, как базы данных , – а именно, элементы документа могут быть интерпретированы как набор записей и полей. В простейшем случае такой документ состоит из корневого элемента, содержащего множество элементов одинакового типа (записи ), каждый из которых имеет одинаковый набор дочерних элементов, все из которых содержат символьные данные (поля). В качестве примера можно привести документ Inventory . xml , который представлен в Листинге 8.1. Элементы BOOK этого документа могут быть интерпретированы как записи, а элементы, вложенные в каждый элемент BOOK ( TITLE , AUTHOR и т.д.), могут быть интерпретированы как поля. Далее в этой лекции вы подробнее узнаете о специфических структурах документа, которые подходят для связывания данных. Если структура документа такова, что не допускает связывание данных, можно использовать метод создания сценариев, о котором пойдет речь в "Отображение XML-документов с использованием сценариев объектной модели документа" .

В этой лекции вы прежде всего получите сведения о двух основных шагах при связывании данных. Затем вы узнаете в подробностях, как привязать XML -документ к HTML -странице (первый основной шаг) и как сцеплять элементы HTML с элементами XML (второй основной шаг). Наконец, вы узнаете, как программировать Web-страницу с помощью сценариев, которые используют в качестве базового объекта программирования связанные данные (а именно, Data Source Object , или DSO ). Вы можете применять эти сценарии совместно со связыванием данных – либо независимо.

В "Отображение XML-документов с использованием сценариев объектной модели документа" вы познакомитесь с совершенно иным способом организации доступа управления и отображения XML -документа с HTML -страницы. Этот метод вы можете использовать для XML -документов любого типа, независимо от вида его логической структуры.

Основные шаги

Вот два основных этапа при связывании данных:

Установка связи XML-документа с HTML-страницей, на которой вы хотите отобразить данные XML. Этот шаг обычно реализуется включением HTML-элемента с именем XML в HTML-страницу. Например, следующий элемент на HTML-странице связывает XML-документ Book.xml со страницей:

В результате HTML -элемент SPAN отображает содержимое XML -элемента AUTHOR .

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

Шаг первый: установка связи XML-документа с HTML-страницей

Чтобы отобразить XML -документ на HTML -странице, вы должны установить его связь со страницей. Самый простой путь сделать это в Microsoft Internet Explorer 5 – включить в страницу HTML -элемент с именем XML , так называемый фрагмент данных. Вы можете использовать одну из двух различных форм записи для фрагмента данных.

В первой форме весь текст XML -документа помещается между начальным и конечным тегами XML . Вот пример фрагмента данных на следующей HTML -странице:

Во второй форме записи HTML -элемент с именем XML остается пустым и содержит только URL XML -документа. Вот пример фрагмента данных на HTML -странице:

В предыдущем примере текст XML -документа должен содержаться в отдельном файле Book . xml :

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

Примечание. Имейте в виду, что элемент с именем XML, используемый для создания фрагмента данных, не является собственно XML-элементом. Это просто HTML-элемент, который содержит XML-элементы. Следовательно, использование синтаксиса XML для пустого элемента, <XML SRC="Book.xml" /> , недопустимо.

Вы должны присвоить атрибуту ID фрагмента данных уникальный идентификатор , который используете для доступа к XML -документу с HTML -страницы. (В предыдущем примере в качестве значения для ID выступает "dsoBook" .)

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

Чаще, однако, вы используете частичный URL , который задает местонахождение относительно местонахождения HTML -страницы, содержащей фрагмент данных. Например, атрибут SRC в следующем фрагменте данных указывает, что файл Book . xml находится в той же папке, что и HTML -страница:

Относительные URL более распространены, потому что XML -документ обычно содержится в той же папке, что и HTML -страница, либо в одной из вложенных папок.

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

В этой статье

Пометки, разметка и теги

Чтобы понять XML, полезно понимать идею пометки данных. Люди создавали документы на протяжении многих лет и на протяжении всего времени они их помечали. Например, преподаватели могут постоянно пометить документы учащихся. Учащиеся могут перемещать абзацы, уточнять предложения, исправлять опечатки и так далее. Пометка документа определяет структуру, смысл и внешний вид сведений в документе. Если вы когда-либо использовали функцию "Отслеживание изменений" в Microsoft Office Word, то использовали компьютеризированную форму пометки.

В мире информационных технологий термин "пометка" превратился в термин "разметка". При разметке используются коды, называемые тегами (или иногда токенами), для определения структуры, визуального оформления и — в случае XML — смысла данных.

Текст этой статьи в формате HTML является хорошим примером применения компьютерной разметки. Если в Microsoft Internet Explorer щелкнуть эту страницу правой кнопкой мыши и выбрать команду Просмотр HTML-кода, вы увидите читаемый текст и теги HTML, например <p> и <h2> . В HTML- и XML-документах теги легко распознать, поскольку они заключены в угловые скобки. В исходном тексте этой статьи теги HTML выполняют множество функций, например определяют начало и конец каждого абзаца ( <p> . </p> ) и местоположение рисунков.

Отличительные черты XML

Документы в форматах HTML и XML содержат данные, заключенные в теги, но на этом сходство между двумя языками заканчивается. В формате HTML теги определяют оформление данных — расположение заголовков, начало абзаца и т. д. В формате XML теги определяют структуру и смысл данных — то, чем они являются.

При описании структуры и смысла данных становится возможным их повторное использование несколькими способами. Например, если у вас есть блок данных о продажах, каждый элемент в котором четко определен, то можно загрузить в отчет о продажах только необходимые элементы, а другие данные передать в бухгалтерскую базу данных. Иначе говоря, можно использовать одну систему для генерации данных и пометки их тегами в формате XML, а затем обрабатывать эти данные в любых других системах вне зависимости от клиентской платформы или операционной системы. Благодаря такой совместимости XML является основой одной из самых популярных технологий обмена данными.

Учитывайте при работе следующее:

HTML нельзя использовать вместо XML. Однако XML-данные можно заключать в HTML-теги и отображать на веб-страницах.

Возможности HTML ограничены предопределенным набором тегов, общим для всех пользователей.

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

Как видно, по тегам XML понятно, какие данные вы просматриваете. Например, ясно, что это данные о коте, и можно легко определить его имя, возраст и т. д. Благодаря возможности создавать теги, определяющие почти любую структуру данных, язык XML является расширяемым.

Но не путайте теги в данном примере с тегами в HTML-файле. Например, если приведенный выше текст в формате XML вставить в HTML-файл и открыть его в браузере, то результаты будут выглядеть следующим образом:

Izzy Siamese 6 yes no Izz138bod Colin Wilcox

Веб-браузер проигнорирует теги XML и отобразит только данные.

Правильно сформированные данные

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

XML не зависит от платформы, и это значит, что любая программа, созданная для использования XML, может читать и обрабатывать XML-данные независимо от оборудования или операционной системы. Например, при применении правильных тегов XML можно использовать программу на настольном компьютере для открытия и обработки данных, полученных с мейнфрейма. И, независимо от того, кто создал XML-данные, с ними данными можно работать в различных приложениях Office. Благодаря своей совместимости XML стал одной из самых популярных технологий обмена данными между базами данных и пользовательскими компьютерами.

В дополнение к правильно сформированным данным с тегами XML-системы обычно используют два дополнительных компонента: схемы и преобразования. В следующих разделах описывается, как они работают.

Схемы

Не пугайтесь термина "схема". Схема — это просто XML-файл, содержащий правила для содержимого XML-файла данных. Файлы схем обычно имеют расширение XSD, тогда как для файлов данных XML используется расширение XML.

Схемы могут быть сложными, и в данной статье невозможно объяснить, как их создавать. (Кроме того, скорее всего, в вашей организации есть ИТ-специалисты, которые знают, как это делать.) Однако полезно знать, как выглядят схемы. Следующая схема определяет правила для набора тегов <CAT> . </CAT>:

Не беспокойтесь, если в примере не все понятно. Просто обратите внимание на следующее:

Строковые элементы в приведенном примере схемы называются объявлениями. Если бы требовались дополнительные сведения о животном, например его цвет или особые признаки, то специалисты отдела ИТ добавили бы к схеме соответствующие объявления. Систему XML можно изменять по мере развития потребностей бизнеса.

Объявления являются мощным средством управления структурой данных. Например, объявление <xsd:sequence> означает, что теги, такие как <NAME> и <BREED> , должны следовать в указанном выше порядке. С помощью объявлений можно также проверять типы данных, вводимых пользователем. Например, приведенная выше схема требует ввода положительного целого числа для возраста кота и логических значений (TRUE или FALSE) для тегов ALTERED и DECLAWED.

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

Преобразования

Как говорилось выше, XML также позволяет эффективно использовать и повторно использовать данные. Механизм повторного использования данных называется преобразованием XSLT (или просто преобразованием).

Вы (или ваш ИТ-отдел) можете также использовать преобразования для обмена данными между серверными системами, например между базами данных. Предположим, что в базе данных А данные о продажах хранятся в таблице, удобной для отдела продаж. В базе данных Б хранятся данные о доходах и расходах в таблице, специально разработанной для бухгалтерии. База данных Б может использовать преобразование, чтобы принять данные от базы данных A и поместить их в соответствующие таблицы.

Сочетание файла данных, схемы и преобразования образует базовую систему XML. На следующем рисунке показана работа подобных систем. Файл данных проверяется на соответствие правилам схемы, а затем передается любым пригодным способом для преобразования. В этом случае преобразование размещает данные в таблице на веб-странице.

В следующем примере кода показан один из способов написания преобразования. Она загружает данные <CAT> в таблицу на веб-странице. В этом примере суть не в том, чтобы показать, как написать преобразование, а в том, чтобы показать одну форму, которую может принять преобразование.

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

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

XML в системе Microsoft Office

Профессиональные выпуски Office обеспечивают всестороннюю поддержку XML. Начиная с Microsoft Office 2007, в Microsoft Office используются форматы файлов на основе XML, например DOCX, XLSX и PPTX. Поскольку XML-данные хранятся в текстовом формате вместо запатентованного двоичного формата, ваши клиенты могут определять собственные схемы и использовать ваши данные разными способами без лицензионных отчислений. Дополнительные сведения о новых форматах см. в сведениях о форматах Open XML и расширениях имен файлов. К другим преимуществам относятся:

Меньший размер файлов. Новый формат использует ZIP и другие технологии сжатия, поэтому размер файла на 75 процентов меньше, чем в двоичных форматах, применяемых в более ранних версиях Office.

Более простое восстановление данных и большая безопасность. Формат XML может быть легко прочитан пользователем, поэтому если файл поврежден, его можно открыть в Блокноте или другой программе для просмотра текста и восстановить хотя бы часть данных. Кроме того, новые файлы более безопасны, потому что они не могут содержать код Visual Basic для приложений (VBA). Если новый формат используется для создания шаблонов, то элементы ActiveX и макросы VBA находятся в отдельном, более безопасном разделе файла. Кроме того, можно удалять личные данные из документов с помощью таких средств, как инспектор документов. Дополнительные сведения об использовании инспектора документов см. в статье Удаление скрытых и персональных данных при проверке документов.

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

Включение средств XML в Office

По умолчанию вкладка "Разработчик" не отображается. Ее необходимо добавить на ленту для использования команд XML в Office.

В Office 2016, Office 2013 или Office 2010: Отображение вкладки "Разработчик".

Читайте также: