Scripting in the Browser - Part 2 | Page 4
Scripting in the Browser - Part 2
The second XSLT stylesheet,
display.xslt, is also very simple. However, it contains a parameter that will be used to select which person to display:
The value of the
personid parameter is set dynamically when users choose which person's details they want to view.
After the first stylesheet loads, the transformation creates the list of links in the XHTML page. It achieves this with the
Note that the transformation is a nondestructive process. After the transformation is completed, the application still has the original
DOM Document object containing the XML content. Because the XML data remains intact, the code can use it again when the user clicks another link. You have effectively cached the XML data in a client-side variable.
Clicking a contact link calls the
showPerson() function, passing the relevant
id is then passed into the
The following lines set the value of the parameter in the XSLT stylesheet:
Note: Mozilla doesn't offer specific support for parameters, so you can use the DOM to manipulate the values of the <xsl:param> element before applying the transformation.
The code applies the updated transformation and displays the result using the
innerHTML property of the
displayDetails <div> element. Figure 8-14 shows the XHTML document with a selected contact. I purposely haven't included CSS styling within this document.
You need to be careful when using this approach with large amounts of data. Because the application downloads all data to the client when the page first loads, you may actually download information that is never used. The user may look only for the first contact and not click the other links.
Because the list of contacts is very small, the issue doesn't arise in this example. However, if you're working with a large organization, the user could wait for a long time while the entire XML document loads. In the next section, I'll show you how to deal with situations where there is too much data to download all at once.
Dealing with Large XML Documents
If you have a large amount of XML content, it may not be efficient to download it all at once. Instead, you can send XML overview data to the client and load other data when it is requested. You may already use this approach with server-side languages.
Let's see how this works in a modified version of the contacts example. You can find this example in the contacts_async folder with the other resources. The example uses similar stylesheets and draws the same content. This time, each contact is stored in a single XML document, and the correct document is loaded when required.
Figure 8-15 shows the process. It is identical until the user clicks a link in the list.
The main difference between the two versions of this application is in the
showProperty() function. In addition, the new version doesn't need the XSLT parameter because the
showProperty() function loads the correct XML document from the server.
The transformation now appears in the
onLoad event handler for the XML DOM, which contains the detailed data. You can load the requested data asynchronously without refreshing the page:
Testing the new application will show the same contact details as before. As with the previous example, the application caches the user interface, and the role of the server is limited to providing data for the application.
Note: This application uses a separate XML document for each contact. In the real world, it's more likely that the XML would be generated using server-side code and that you'd load a page from a URL such as
contactsXML.aspx?id=1rather than generating several XML documents.
As you saw, Mozilla and IE don't offer universal support for XML and XSLT. Opera 8.5 has no XSLT support, although this is likely to change with the release of Opera 9. The use of a DOM wrapper allows you to create a cross-browser application that takes advantage of clientside XML and XSLT. In the next chapter, I'll extend this concept further and look at the Ajax approach to working with XML in the browser.