Основы XML. Преобразование XML-HTML. Использование JavaScript

Цель занятия

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

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

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

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

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

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

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

<?xml version="l.0"?>

<root>

<book>

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

<author> Jerom-K-Jerom</author>

<price> 12000</price>

</book>

<book>

<title> Notre Domme de Paris</title>

<author> V.Hugo</author>

<price> 15000 </price>

</book>

<book>

<title> А War and Peace</title>

<author> L.Tolstoy</author>

<price> 16500</price>

</book>

<book>

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

<price> 9000</price>

</book>

</root>

Это пример правильно составленного документа 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

<HTML>

<BODY bgcolor=#AAOOEE>

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

<XML src="textbd.xml" ID="myxml"></XML>

<Table id="tb" border="2" width="80%" datasrc="#myxml"> <Thead style="background-color:aqua">

<TH> The Book Title</TH>

<TH> The author </TH>

<TH> The price </TH>

</Thead>

<TR>

<TD><SPAN DATAFLD="title"/></TD>

<TD><SPAN DATAFLD="author"/></TD>

<TD><SPAN DATAFLD="price"/></TD>

</TR>

</TABLE>

</BODY>

</HTML>

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

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

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

<XML src="textbd.xml" ID="myxml"></XML>

<Table id="tb" border="2" width="80%" datasrc="#myxml">

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

<TD><SPAN DATAFLD="title"/></TD>

<TD><SPAN DATAFLD="author"/></TD>

<TD><SPAN DATAFLD="price"/></TD>

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

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

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

<html>

<body bgcolor=#AAOOEE>

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

<XML src="textbd.xml" ID="myxml"></XML>

<Table id="tb" border="2" width="80%" datasrc="#myxml" datapagesize="2">

<Thead style="background-color: acqua">

<TH> The Book Title</TH>

<TH> The author </TH>

<TH> The price </TH>

</Thead>

<TR>

<TD><SPAN DATAFLD="title"/></TD>

<TD><SPAN DATAFLD="author"/></TD>

<TD><SPAN DATAFLD="price"/></TD>

</TR>

</TABLE>

<Button onClick="tb.nextPage()">&gt</Button> <!—Команда отображает следующую страницу—>

<Button onClick="tb.previousPage()">&lt</Buttonx!—Команда отображает предыдущую страницу загруженного в память XML- документа—>

<br/>

<br/>

</BODY>

</HTML>

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

<Table id="tb" border="2" width="80%" datasrc="#myxml" datapagesize="2">

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

□      getElementByTagName("title").item(i).text;

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

□      getElementsByTagName("title").length;

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

□      String.indexOf(stringl);

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

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

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

<html>

<head>

<script>

<! —

function showelement()

// Подключение 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>

if (z>0)

{

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

var s=new

String(odoc.getElementsByTagName("title").item(i).text); if(s.indexOf(stringl) == -1)

{

continue;

}

else // Совпадение строк установлено.

// Отображаем содержимое тега <author>

{

var s2=new

String(odoc.getElementsByTagName("author").item(i).text); document.myform.mytext.value="Author:"+s2; break;

}

}

}

else

{

alert ("No entry found for"+stringl);

}

}

—>

</script>

</head>

<body bgcolor=#AABBEE>

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

<XML src="textbd.xml" ID="myxml"></XML>

<Table id="tb" border="2" width="80%" datasrc="#myxml" datapagesize="2">

<Thead style="background-color:aqua">

<TH> The Book Title</TH>

<TH> The author </TH>

<TH> The price </TH>

</Thead>

<TR>

<TD><SPAN DATAFLD="title"/></TD>

<TD><SPAN DATAFLD="author"/></TD>

<TD><SPAN DATAFLD="price"/></TD>

</TR>

</TABLE>

<br/>

<br/>

<Button onClick="tb.nextPage()">&gt</Button>

<Button onClick="tb.previousPage()">&lt</Button>

<br/>

<br/>

<form name="myform">

<br>

<input type="Text" name="mytext" value=""/>

<br>

<center>

<Input type="Button" value="Find" onClick="showelement ()"> <br>

<Input type="Reset" value="Clear"/>

</form>

</BODY>

</HTML>

Команды:

var odoc=new ActiveXObject("Microsoft.XMLDOM"); odoc.async=false; odoc.load("textbd.xml");

используются для создания объекта odoc, содержащего набор записей XML. Имя объекта odoc выбрано произвольно. Функция скрипта реализована между тегами <script>, </script>. Для активизации функции нужно в текстовом поле:

<input type="Text" name="mytext" value=""/> набрать полное или сокращенное название книги и нажать кнопку Find. Для этого предварительно следует очистить содержимое текстового поля кнопкой Clear.

Источник: Герман О. B., Герман Ю. О., Программирование на Java и C# для студента. — СПб.: БХВ-Петербург, 2005. — 512 c.: ил.

Вы можете следить за любыми ответами на эту запись через RSS 2.0 ленту. Вы можете оставить ответ, или trackback с вашего собственного сайта.

Оставьте отзыв

XHTML: Вы можете использовать следующие теги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

 
Rambler's Top100