Отобразить xml в html

XML Applications

This chapter demonstrates some HTML applications using XML, HTTP, DOM, and JavaScript.

The XML Document Used

In this chapter we will use the XML file called «cd_catalog.xml».

Display XML Data in an HTML Table

This example loops through each element, and displays the values of the and the elements in an HTML table:

Example

For more information about using JavaScript and the XML DOM, go to DOM Intro.

Display the First CD in an HTML div Element

This example uses a function to display the first CD element in an HTML element with >

Example

function displayCD(i) var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() if (this.readyState == 4 && this.status == 200) myFunction(this, i);
>
>;
xmlhttp.open(«GET», «cd_catalog.xml», true);
xmlhttp.send();
>

function myFunction(xml, i) var xmlDoc = xml.responseXML;
x = xmlDoc.getElementsByTagName(«CD»);
document.getElementById(«showCD»).innerHTML =
«Artist: » +
x[i].getElementsByTagName(«ARTIST»)[0].childNodes[0].nodeValue +
«
Title: » +
x[i].getElementsByTagName(«TITLE»)[0].childNodes[0].nodeValue +
«
Year: » +
x[i].getElementsByTagName(«YEAR»)[0].childNodes[0].nodeValue;
>

Navigate Between the CDs

To navigate between the CDs, in the example above, add a next() and previous() function:

Example

function next() <
// display the next CD, unless you are on the last CD
if (i < x.length-1) <
i++;
displayCD(i);
>
>

function previous() // display the previous CD, unless you are on the first CD
if (i > 0) i—;
displayCD(i);
>
>

Show Album Information When Clicking On a CD

The last example shows how you can display album information when the user clicks on a CD:

Example

function displayCD(i) <
document.getElementById(«showCD»).innerHTML =
«Artist: » +
x[i].getElementsByTagName(«ARTIST»)[0].childNodes[0].nodeValue +
«
Title: » +
x[i].getElementsByTagName(«TITLE»)[0].childNodes[0].nodeValue +
«
Year: » +
x[i].getElementsByTagName(«YEAR»)[0].childNodes[0].nodeValue;
>

Источник

Отображение XML-документов с использованием связывания данных

Аннотация: В этой лекции вы получите сведения о двух основных шагах при связывании данных. Также узнаете в подробностях, как привязать XML-документ к HTML-странице, как сцеплять элементы HTML с элементами XML, и как программировать Web-страницу с помощью сценариев, которые используют в качестве базового объекта программирования связанные данные.

Связывание данных является первым из методов отображения 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 -документов любого типа, независимо от вида его логической структуры.

Ссылка. Для получения более подробной информации о связывании данных и объекте DSO , который лежит в основе этого метода, обратитесь к Web-странице Microsoft Developer Network (MSDN) по адресу: http://msdn.microsoft.com/xml/xmlguide/xmldso.asp.

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

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

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

Источник

XML Applications

This chapter demonstrates some HTML applications using XML, HTTP, DOM, and JavaScript.

The XML Document Used

In this chapter we will use the XML file called «cd_catalog.xml».

Display XML Data in an HTML Table

This example loops through each element, and displays the values of the and the elements in an HTML table:

Example

For more information about using JavaScript and the XML DOM, go to DOM Intro.

Display the First CD in an HTML div Element

This example uses a function to display the first CD element in an HTML element with >

Example

function displayCD(i) var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() if (this.readyState == 4 && this.status == 200) myFunction(this, i);
>
>;
xmlhttp.open(«GET», «cd_catalog.xml», true);
xmlhttp.send();
>

function myFunction(xml, i) var xmlDoc = xml.responseXML;
x = xmlDoc.getElementsByTagName(«CD»);
document.getElementById(«showCD»).innerHTML =
«Artist: » +
x[i].getElementsByTagName(«ARTIST»)[0].childNodes[0].nodeValue +
«
Title: » +
x[i].getElementsByTagName(«TITLE»)[0].childNodes[0].nodeValue +
«
Year: » +
x[i].getElementsByTagName(«YEAR»)[0].childNodes[0].nodeValue;
>

Navigate Between the CDs

To navigate between the CDs, in the example above, add a next() and previous() function:

Example

function next() <
// display the next CD, unless you are on the last CD
if (i < x.length-1) <
i++;
displayCD(i);
>
>

function previous() // display the previous CD, unless you are on the first CD
if (i > 0) i—;
displayCD(i);
>
>

Show Album Information When Clicking On a CD

The last example shows how you can display album information when the user clicks on a CD:

Example

function displayCD(i) <
document.getElementById(«showCD»).innerHTML =
«Artist: » +
x[i].getElementsByTagName(«ARTIST»)[0].childNodes[0].nodeValue +
«
Title: » +
x[i].getElementsByTagName(«TITLE»)[0].childNodes[0].nodeValue +
«
Year: » +
x[i].getElementsByTagName(«YEAR»)[0].childNodes[0].nodeValue;
>

Источник