Displaying XML Data from other Web Sources as HTML using XSL, Part 2By Brandon Monahan
In Part 1 we discussed the basics of XML. While XML is great for describing data it is not intended to provide information on how that data should be rendered or displayed. This task is relegated to XSL...
XSL - What is it?
Now that you are comfortable because you know everything you need to know, I will throw XSL at you. XSL is the style sheet language for XML. By using XSL you can transfer XML documents into text, html, or new XML documents with different structures. That said; let me say that XSL is really a breeze when using it to transform XML into HTML. When doing this transfer the XSL file is mostly HTML with smattering of XSL command. But, we will get into that when the time comes.
Getting Started (You would think by now we were well on our way)
First off, we are going to be parsing our XML file by using the Microsoft DOM object. That means that you need to have it installed on your server. To install it, just install IE 5.0 or above. If you already have that browser, no worries, you are ready to go.
Next, let's do a little asp coding. First thing we need to do is initiate the DOM Object:
Well that was easy. Next, we need to load our XML document into the DOM. To do this simply call
xml.load method like such:
Now, notice that I am getting XML from an external website. I know that after the abundance of information I
gave you on creating XML documents you will want to run out and build your own XML, but I suggest that for now
we use one that I know to be well formed (also, when we are done, you will have a nice display of constantly
updated news items). If you would like to pull from your own XML data, you will need to specify the physical
C:\Blah\Whatever.xml). If the XML file is in the Web site directory structure you can get
the physical path by using
To see what this XML information looks like, go to it in IE 5 or greater at http://headlines.isyndicate.com/pages/cui/news.xml. You will see a layout of news stories each with it's own headline, source, href, and more. Here is the basic design:
Note: this data feed is provided free from ISyndicate.com - if you would like to use this feed or make your own, please follow their rules including displaying their logo.
This XML is pretty straight forward. The root element is
<newsfeed> under which you have
<channel> tags which have the channel (source) name and so on. Under
<channel> is the final element in the hierarchy, the
So, we have loaded the external XML data into our DOM. The next step is to write the XSL document. So on to XSL syntax!
To make HTML using XSL you simply write out the values of the XML in between the HTML. This is very much akin to using ASP to write out the values from a database in between HTML tags. Only the syntax is different. For example, if you were to write a variable to a page and make it bold in ASP it would look like:
In XSL it would look like:
Not really that difficult at all. A couple things to keep in mind - XSL is written in XML which means all of
the syntax rules apply - Case Sensitive, Quotes around all attributes (including HTML), and all elements must
have an ending element (including HTML). This means that if you use
<br> you must use
OK, so we have the basic ability to write the value of an element to a page. This ability is useless until we
have the ability to navigate the XML elements. For example, if you were to use
<xsl:value-of select="headline"> with no other code, you would get an error (or a blank screen).
The reason for this is that XML allows elements with the same name that mean different things to co-exist in
a document (as long as they are positioned differently). That translated means you need to specify the exact
location of the element you are trying to print to the page. For example, the following would be proper and
would write out the headline value (assuming you completed the header correctly which we will go into later):
You can see that this works somewhat like a directory structure - you have to get the correct directory to get the value.
In Part 3 we'll look at some more powerful uses of XSL and show one way to display the XML feed from iSyndicate.com!