Datasheet
10. The top entry has disappeared.
How It Works
As mentioned previously, this discussion does not go into detail about this example because the tech-
niques will be covered in later chapters. Instead, let’s look at what the application is doing and how the
different parts fit together. We’ve created a simple menu system in an XSL template. This consists of a
table with five rows. The XSL template takes its data from the XML document
SuiteList.xml. The
middle row of the XSL template contains a JavaScript
mouseover event, which turns on the visibility of
the submenu. The XSL template contains a subtemplate, which is used to display the submenu:
<xsl:template name=”DynamicSubMenu”>
<div id=”romesubmenu” class=”submenublock” onmouseover=”var submenu =
document.getElementById(‘romesubmenu’);submenu.style.visibility = ‘visible’;return
true;”>
<xsl:for-each select=”//Suite”>
<xsl:if test=”WeeksFree>0”>
<div>
<a href=”{Name}.htm”>
<xsl:value-of select=”Name”/>
</a>
</div>
<br/>
</xsl:if>
</xsl:for-each>
</div>
</xsl:template>
XSL statements are used in the template to iterate through the SuiteList.xml document. The xsl:for-
each
statement locates each element called <Suite> in the XML document. There are four elements in all:
...
<Suite>
<SuiteID>1001</SuiteID>
<Name>Ponderosa</Name>
<Size>2</Size>
<Price>50</Price>
<WeeksFree>0</WeeksFree>
</Suite>
...
Then, the <xsl:if> statement is used to conditionally display the submenu item. You check the value of
the
<WeeksFree> element, and you say that, if this element is greater than zero, then you will display the
<span> and <a> element’s contained within. If not, you won’t. This has the effect of showing only the
suites on the submenu that have a
WeeksFree value greater than zero, which corresponds with the
requirement of the businesses that wish to display only the suites with available weeks.
What is happening behind the scenes is of most interest. Instead of waiting to go back to the server for a
refresh, you are actually getting the code to reload the XML document every 10 seconds. This is all con-
trolled in the JavaScript on the page. In four swift steps, you create an
XMLHttpRequest object, you set
the event to notify you when the XML document has been loaded, you get the XML document, and you
send it. The creation of the
XMLHttpRequest object is performed at the head of the code. It is browser
independent, but you can add some code to make sure that this works on IE 6 as well. You create it at the
head because you want the object to be accessible to all functions in your script.
27
Chapter 1: Introducing Ajax
04_106754 ch01.qxp 2/9/07 6:15 PM Page 27