- XML Parser
- XML Parser
- Parsing a Text String
- Example
- Example Explained
- The XMLHttpRequest Object
- Example
- How to view XML files in a web browser
- How to Use XSLT to Display XML Data on an HTML Webpage
- How to Add Example Data to an XML File
- How to Use XSLT to Read Data From the XML File
- How to Display Data on an HTML Webpage
- Displaying XML
- Viewing XML Files
- Viewing an Invalid XML File
- Other XML Examples
- Why Does XML Display Like This?
XML Parser
All major browsers have a built-in XML parser to access and manipulate XML.
XML Parser
The XML DOM (Document Object Model) defines the properties and methods for accessing and editing XML.
However, before an XML document can be accessed, it must be loaded into an XML DOM object.
All modern browsers have a built-in XML parser that can convert text into an XML DOM object.
Parsing a Text String
This example parses a text string into an XML DOM object, and extracts the info from it with JavaScript:
Example
parser = new DOMParser();
xmlDoc = parser.parseFromString(text,»text/xml»);
Example Explained
An XML DOM parser is created:
The parser creates a new XML DOM object using the text string:
The XMLHttpRequest Object
The XMLHttpRequest Object has a built in XML Parser.
The responseText property returns the response as a string.
The responseXML property returns the response as an XML DOM object.
If you want to use the response as an XML DOM object, you can use the responseXML property.
Example
Request the file cd_catalog.xml and use the response as an XML DOM object:
xmlDoc = xmlhttp.responseXML;
txt = «»;
x = xmlDoc.getElementsByTagName(«ARTIST»);
for (i = 0; i < x.length; i++) txt += x[i].childNodes[0].nodeValue + "
«;
>
document.getElementById(«demo»).innerHTML = txt;
How to view XML files in a web browser
Once you learn that HTML is a form of XML, you might wonder what would happen if you tried to view an XML file in a browser. The results are quite disappointing—Firefox shows you a banner at the top of the page that says, «This XML file does not appear to have any style information associated with it. The document tree is shown below.» The document tree looks like the file would look in an editor:
This is the beginning of the menu.xml file for the online manual that comes with Scribus, to which I’m a contributor. Although you see blue text, they are not clickable links. I wanted to be able to view this in a regular browser, since sometimes I need to go back and forth from the canvas in Scribus to the manual to figure out how to do something (maybe to see if I need to edit the manual to straighten out some misinformation or to add some missing information).
The way to help a browser know what to do with these XML tags is by using XSLT—Extensible Stylesheet Language Transformations. In a broad sense, you could use XSLT to transform XML to a variety of outputs, or even HTML to XML. Here I want to use it to present the XML tags to a browser as suitable HTML.
One slight modification needs to happen to the XML file:
Adding this second line to the file tells the browser to look for a file named scribus-manual.xsl for the style information. The more important part is to create this XSL file. Here is the complete listing of scribus-manual.xsl for the Scribus manual:
h2,h3,h4 < text-indent: 50px;>ul 

This looks a lot more like HTML, and you can see it contains a number of HTML tags. After some preliminary tags and some particulars about displaying H2, H3, and H4 tags, you see a Table tag. This adds a graphical heading at the top of the page and uses some images already in the documentation files.
After this, you get into the process of dissecting the various submenuitem tags, trying to create the nested listing structure as it appears in Scribus when you view the manual. One feature I did not try to duplicate is the ability to collapse and expand submenuitem areas. As you can imagine, it takes some time to sort through the number of nested lists you need to create, but when I finished, here is how it looked:
This minimal editing to menu.xml does not interfere with Scribus’ ability to show the manual in its own browser. I put this modified menu.xml file and the scribus-manual.xsl in the English documentation folder for 1.5.x versions of Scribus, so anyone using these versions can simply point their browser to the menu.xml file and it should show up just like you see above.
A much bigger chore I took on a few years ago was to create a version of the ICD10 (International Classification of Diseases, version 10) when it came out. Many changes were made from the previous version (ICD9) to 10. These are important since these codes must be used for diagnostic purposes in medical practice. You can easily download XML files from the US Centers for Medicare and Medicaid website since it is public information, but—just as with the Scribus manual—these files are hard to use.
Here is the beginning of the tabular listing of diseases:
One of the features I created was the color coding used in the listing shown here:
As with menu.xml, the only editing I did in this Tabular.xml file was to add as the second line of the file. I started this project with the 2014 version, and I was quite pleased to find that the original tabular.xsl stylesheet worked perfectly when the 2016 version came out, which is the last one I worked on. The Tabular.xml file is 8.4MB, quite large for a plaintext file. It takes a few seconds to load into a browser, but once it’s loaded, navigation is fast.
While you may not often have to deal with an XML file in this way, if you do, I hope this article shows that your file can easily be turned into something much more usable.
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.
- Create a new file called data.xml.
- 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.
- In the same folder as your XML file, create a new file called xmlstylesheet.xsl.
- 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.
- In the same folder as your XML and XSL files, create a new file called index.html.
- 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">
Displaying XML
Don’t expect XML files to be displayed as HTML pages.
Viewing XML Files
Look at the XML file above in your browser: note.xml
Most browsers will display an XML document with color-coded elements.
Often a plus (+) or minus sign (-) to the left of the elements can be clicked to expand or collapse the element structure.
To view raw XML source, try to select «View Page Source» or «View Source» from the browser menu.
Note: In Safari 5 (and earlier), only the element text will be displayed. To view the raw XML, you must right click the page and select «View Source».
Viewing an Invalid XML File
If an erroneous XML file is opened, some browsers will report the error, and some will display it, or display it incorrectly.
Try to open the following XML file: note_error.xml
Other XML Examples
Viewing some XML documents will help you get the XML feeling:
An XML breakfast menu
This is a breakfast food menu from a restaurant, stored as XML.
An XML CD catalog
This is a CD collection, stored as XML.
An XML plant catalog
This is a plant catalog from a plant shop, stored as XML.
Why Does XML Display Like This?
XML documents do not carry information about how to display the data.
Without any information about how to display the data, the browsers can just display the XML document as it is.
Tip: If you want to style an XML document, use XSLT.