Using the Sarissa Framework to Handle XML
Sarissa is an XML-handling JavaScript library that lets you extract data from XML documents, use Extensible Stylesheet Language (XSLT) to transform XML into other formats like HTML, use XML’s XPath to address the data in XML documents, and more. Sarissa also lets you use XMLHttpRequest to download data using Ajax.
| On the Web | You can get Sarissa from https://sourceforge.net/projects/sarissa/. |
The Sarissa framework can be a good choice because it lets you work with the XML you’ve downloaded easily. Here’s an example, testSarissa.html, that lets you download and extract the data in the <data> element in an XML document, sarissa.xml:
<?xml version="1.0" ?> <ajax> <response> <data>This text was downloaded with Sarissa.</data> </response> </ajax>
As usual, you need a button connected to a JavaScript function, useSarissa this time, and a <div> element in which to display the results:
<form> <input type = "button" value = "Display the text" onclick = "useSarissa()"> </form> <div > <p>The fetched data will go here.</p> </div>
You need to include two of the JavaScript libraries that come with Sarissa: sarissa.js and sarissa_ieemu_xpath.js:
<head> <title>Testing the Sarissa framework</title> <script src = "sarissa.js"></script> <script src = "sarissa_ieemu_xpath.js"> . . .
The useSarissa function starts by creating a Sarissa DomDocument object, which is the way that Sarissa handles XML:
<head> <title>Testing the Sarissa framework</title> <script src = "sarissa.js"></script> <script src = "sarissa_ieemu_xpath.js"> </script> <script language = "javascript"> function useSarissa() { var domDocument = Sarissa.getDomDocument(); . . . } </script> </head> To work with Ajax, set the DomDocument object’s async property to true:
<head> <title>Testing the Sarissa framework</title> <script src = "sarissa.js"></script> <script src = "sarissa_ieemu_xpath.js"> </script> <script language = "javascript"> function useSarissa() { var domDocument = Sarissa.getDomDocument(); domDocument.async = true; . . . } </script> </head> then connect an anonymous function to the DomDocument object’s onreadystatechange to handle the download:
<head> <title>Testing the Sarissa framework</title> <script src = "sarissa.js"></script> <script src = "sarissa_ieemu_xpath.js"> </script> <script language = "javascript"> function useSarissa() { var domDocument = Sarissa.getDomDocument(); domDocument.async = true; domDocument.onreadystatechange = function () { if (domDocument.readyState == 4) { . . . } } } </script> </head> To recover the data from the <data> element, use the Sarissa method, selectSingleNode, passing that method the XPath expression that points to the <data> element, //data:
<head> <title>Testing the Sarissa framework</title> <script src = "sarissa.js"></script> <script src = "sarissa_ieemu_xpath.js"> </script> <script language = "javascript"> function useSarissa() { var domDocument = Sarissa.getDomDocument(); domDocument.async = true; domDocument.onreadystatechange = function () { if (domDocument.readyState == 4) { var element = domDocument.selectSingleNode("//data"); . . . } } } </script> </head> Having isolated the <data> element, you can extract the text from that element using the Sarissa serialize method and display that text like this:
<head> <title>Testing the Sarissa framework</title> <script src = "sarissa.js"></script> <script src = "sarissa_ieemu_xpath.js"> </script> <script language = "javascript"> function useSarissa() { var domDocument = Sarissa.getDomDocument(); domDocument.async = true; domDocument.onreadystatechange = function () { if ( domDocument.readyState == 4) { var element = domDocument.selectSingleNode("//data"); document.getElementById("targetDiv").innerHTML = Sarissa.serialize(element); } } } </script> </head> All that’s left is to connect to the server, using the Sarissa load method:
<head> <title>Testing the Sarissa framework</title> <script src = "sarissa.js"></script> <script src = "sarissa_ieemu_xpath.js"> </script> <script language = "javascript"> function useSarissa() { var domDocument = Sarissa.getDomDocument(); domDocument.async = true; domDocument.onreadystatechange = function () { if (domDocument.readyState == 4) { var element = domDocument.selectSingleNode("//data"); document.getElementById("targetDiv").innerHTML = Sarissa.serialize(element); } } domDocument.load("sarissa.xml"); } </script> </head> And you’re done. You can see this Sarissa page at work in Figure 6.9.
Figure 6.9: Downloading XML with the Sarissa framework
Another framework that specializes in handling XML-the Interactive Website Framework-is discussed next.
