Html use xml data

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

Ths 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 show album information when the user clicks on a CD:

Источник

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;
>

Источник

How to Use XSLT to Display XML Data on an HTML Webpage

To view XML data as part of a webpage, you can utilize XSLT; browsers do not provide this capability on their own.

Readers like you help support MUO. When you make a purchase using links on our site, we may earn an affiliate commission. Read More.

XML is a language used to structure, store, and exchange data. XSLT is another language that allows you to transform your XML data into other formats, such as HTML.

You can use XSLT to display XML data on an HTML webpage. Using XML and XSLT to display your data can be useful, as it allows you to structure the data in a way that makes sense for your specific needs.

How to Add Example Data to an XML File

To display XML data on a webpage, you first need to create the XML file and add data to it.

1. Create a new file called data.xml.
2. Inside the XML file, declare the encoding and XML version:

 

games> 
game> 
name>The Last of Us Part II name> 
developer>Naughty Dog developer> 
game> 
game> 
name>Ghost of Tsushima name> 
developer>Sucker Punch Productions developer> 
game> 
game> 
name>Death Stranding name> 
developer>Kojima Productions developer> 
game> 
games> 

How to Use XSLT to Read Data From the XML File

Create a new XSL file to loop through each data point in the XML page and display the data.

1. In the same folder as your XML file, create a new file called xmlstylesheet.xsl.
2. Inside the file, declare the XSL version, and add the basic XSL tag structure:

 
xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> 
// Your code here 
xsl:stylesheet> 

xsl:template match="/"> 
html> 
body> 
// Your HTML code in here 
body> 
html> 
xsl:template> 

xsl:for-each select="games/game"> 
 
xsl:for-each> 

xsl:value-of select="name" />
xsl:value-of select="developer" /> 

How to Display Data on an HTML Webpage

You will not be able to open the XSLT or XML file directly in the browser to view the data as part of a webpage. Create a new HTML file, and render the data using an iframe tag.

1. In the same folder as your XML and XSL files, create a new file called index.html.
2. Add the basic structure of an HTML file. If you have not used HTML before, you can brush up on introductory HTML concepts.

html>
html> 
head> 
title>XML and XSLT Example title> 
head> 
body> 
 
 
body> 
html> 

h1>XML and XSLT Example h1>
p>The following content is generated from an XML file: p>
iframe src="data.xml" xslt="xmlstylesheet.xsl"> iframe> 

html,
body height: 100%; 
margin: 0;
>

body display: flex; 
justify-content: center; 
align-items: center; 
flex-direction: column;
>

p margin-bottom: 24px;
> 

link rel="stylesheet" href="styles.css"> 

Источник

How Can XML be Used?

XML is often used to separate data from presentation.

XML Separates Data from Presentation

XML does not carry any information about how to be displayed.

The same XML data can be used in many different presentation scenarios.

Because of this, with XML, there is a full separation between data and presentation.

XML is Often a Complement to HTML

In many HTML applications, XML is used to store or transport data, while HTML is used to format and display the same data.

XML Separates Data from HTML

When displaying data in HTML, you should not have to edit the HTML file when the data changes.

With XML, the data can be stored in separate XML files.

With a few lines of JavaScript code, you can read an XML file and update the data content of any HTML page.

Books.xml

You will learn a lot more about using XML and JavaScript in the DOM section of this tutorial.

Transaction Data

Thousands of XML formats exist, in many different industries, to describe day-to-day data transactions:

• Stocks and Shares
• Financial transactions
• Medical data
• Mathematical data
• Scientific measurements
• News information
• Weather services

Example: XML News

XMLNews is a specification for exchanging news and other information.

Using a standard makes it easier for both news producers and news consumers to produce, receive, and archive any kind of news information across different hardware, software, and programming languages.

An example XMLNews document:

Example: XML Weather Service

An XML national weather service from NOAA (National Oceanic and Atmospheric Administration):

A Few Clouds
11
-12
36
West
280
18.4
29 1023.630.23-11
-24
-7
-22
10.00

Источник