|
Introduction
Your Web server has a tough job. It must connect to databases, retrieve data, process it, format it into HTML, and then send it to the client. Increase the life of your server by reducing the load on it using XML and XSL. The eXtensible Stylesheet Language (or XML) is a style-sheet format for XML documents that is the counterpart to the Cascading Style Sheet (CSS) in HTML. By sending the XML and XSL to the client, and having the client create the HTML for you, your server can spend time doing other things, like processing credit card orders!
Requirements
Server and client should have the XML parser, version 3 from http://msdn.Microsoft.com/xml. The client should have IE 5 or higher.
Overview
An ASP page will connect to a database and retrieve the data. Then it will be converted into XML and sent to the client. The ASP page will associate an XSL URL in the data stream it sends to the client, and the XSL will have a CSS associated with it as well. Once the client receives the XML and fetches the associated XSL and CSS, the client will transform the XML into HTML.
To simplify the code, we won't be using error checking, but you should use it in your production applications.
Step 1: Retrieve The Data from a Database
In this example we'll be using an Access database with simple customer data.
Here's the full ASP code:
<%@ Language=VBScript %>
<% option explicit %>
<%
Response.ContentType = "text/xml"
Response.Write "<?xml version='1.0' ?>"
Response.Write "<?xml-stylesheet type='text/xsl' href='report.xsl'?>"
dim RS, CN
set CN = server.CreateObject("adodb.connection")
set RS = server.CreateObject("adodb.recordset")
CN.ConnectionString = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & server.MapPath("sales.mdb")
CN.Open
RS.Open "select first, last, phone, email from sales order by last",cn
Response.Write "<ROOT>"
Response.Write RS2XML(RS,"CUSTOMER")
Response.Write "</ROOT>"
CN.close
set rs = nothing
set cn = nothing
function RS2XML(rs, ChildNode)
dim Field
if rs is nothing then exit function
ChildNode = ucase(ChildNode)
if rs.eof then
RS2XML = ""
exit function
end if
do until rs.eof
if ChildNode <> "" then RS2XML = RS2XML & "<" & ChildNode & ">"
for each field in rs.fields
RS2XML = RS2XML & " <" & ucase(field.name) &
">" & server.HTMLEncode(NotNull(field.value)) & "</" & ucase(field.name) & ">"
next
if ChildNode <> "" then RS2XML = RS2XML & "</" & ChildNode & ">"
rs.movenext
loop
end function
Function NotNull(vOrig)
If(IsNull(vOrig)) then
NotNull = ""
else
NotNull = vOrig
end if
End Function
%>
Code Analysis for Step 1
Response.ContentType = "text/xml"
Response.Write "<?xml version='1.0' ?>"
Response.Write "<?xml-stylesheet type='text/xsl' href='report.xsl'?>"
This tells the browser that once it gets the text, it should be treated as if it's XML data with an associated XSL style sheet. Remove these three lines to debug the output. When ASP generates errors, it writes code to your Response stream. So if the browser is expecting XML and gets error messages, it won't show the error to you.
In order to see the XML in native format, omit the line containing "report.xsl." Your XML will be then transformed into HTML using IE's native XSL. It'll look like this:
dim RS, CN
set CN = server.CreateObject("adodb.connection")
set RS = server.CreateObject("adodb.recordset")
CN.ConnectionString = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & server.MapPath("sales.mdb")
CN.Open
RS.Open "select first, last, phone, email from sales order by last",cn
This gets the recordset from the database. In this case it is sales data for a report.
Response.Write "<ROOT>"
Response.Write RS2XML(RS,"CUSTOMER")
Response.Write "</ROOT>"
This is the heart of the ASP page. We write out a ROOT node for the XML document. It can be called anything you wish, but ROOT serves to illustrate the point. Then we pass the recordset to a generic function that converts recordsets into XML. You can save the contents of a recordset into XML format, however, we use this function to show how you can control the type of XML output.
Now that the ASP page has written XML data and XML headers to the client, the client will transform the XML into HTML using the style sheet indicated at the top of the ASP page.
Step 2: Using XSL to Transform XML into HTML on the Client
The XSL style sheet tells the browser how to transform the XML into HTML. Here's the complete code.
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
<xsl:template match="/">
<HTML>
<HEAD>
<LINK rel="stylesheet" type="text/css" href="general.css"/>
</HEAD>
<BODY>
<TABLE class="tblResults">
<CAPTION class="title">Customers</CAPTION>
<TR>
<TD class="Header">Name:</TD>
<TD class="Header">E-Mail:</TD>
<TD class="Header">Phone:</TD>
</TR>
<xsl:for-each select="ROOT/CUSTOMER">
<TR>
<TD class="Data">
<xsl:value-of select="FIRST"/>
<xsl:value-of select="LAST"/>
</TD>
<TD class="Data">
<A>
<xsl:attribute name="href">mailto:<xsl:value-of select="EMAIL"/></xsl:attribute>
<xsl:value-of select="EMAIL"/>
</A>
</TD>
<TD class="Data"><xsl:value-of select="PHONE"/></TD>
</TR>
</xsl:for-each>
</TABLE>
</BODY>
</HTML>
</xsl:template>
</xsl:stylesheet>
Code Analysis for Step 2
Notice that the XML looks a lot like HTML. The XSL is simply interspersed into the HTML; it acts exactly like a mail merge, in fact. The HTML must be well formed. All tags must have case-sensitive closing tags, and tags that normally don't have closing tags, like the line break (BR) tag, should look like this <BR/> with the trailing /.
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
<xsl:template match="/">
<HTML>
<HEAD>
<LINK rel="stylesheet" type="text/css" href="general.css"/>
</HEAD>
<BODY>
This code tells the browser the file is a standard XSL style sheet and that it will use the Cascading Style Sheet called general.css to handle look and feel.
<TABLE class="tblResults">
<CAPTION class="title">Customers</CAPTION>
<TR>
<TD class="Header">Name:</TD>
<TD class="Header">E-Mail:</TD>
<TD class="Header">Phone:</TD>
</TR>
<xsl:for-each select="ROOT/CUSTOMER">
<TR>
<TD class="Data">
<xsl:value-of select="FIRST"/>
<xsl:value-of select="LAST"/>
</TD>
<TD class="Data">
<A>
<xsl:attribute name="href">mailto:<xsl:value-of select="EMAIL"/></xsl:attribute>
<xsl:value-of select="EMAIL"/>
</A>
</TD>
<TD class="Data"><xsl:value-of select="PHONE"/></TD>
</TR>
</xsl:for-each>
</TABLE>
This section is where the table is created. The main loop happens inside the table after the first row is written. The first row contains the titles of the columns. The loop is controlled by an XSL for-next command. The XML is output using the XSL value-of command.
One interesting part is the XSL attribute command. Use it to add the attribute H_REF to the anchor tag, "A," so that the e-mail address becomes clickable.
</BODY>
</HTML>
</xsl:template>
</xsl:stylesheet>
The document ends up with the last tags being closed.
When rendered, the table will look like this:
Final Notes
The ASP page in this example can now act as an XML data provider. You can even specify it as the source of an XML data island <xml src="default.asp"></xml> or provide XML for other on-line applications in a Business to Business (B2B) solution. Remember the server doesn't always have to produce the HTML output; the client can do that work for you.
About the Author
Ian Vink is a Canadian who has worked all over the world in the IT sector, most recently in Haifa, Israel. He has been an intranet Webmaster for four years and has been writing code since 1982. He's taught computer technology since 1994 and owns a number of Web stores. He's married to a wonderful Australian Oracle designer. Please send comments or questions to Ian at ian@ianvink.com.
|
