Using libXmlRequest to Download XML

One of the popular Ajax frameworks is the Ajax libXmlRequest framework, and you can pick it up for free at www.whitefrost.com/reference/2003/06/17/libXmlRequest.html. What you actually download is libXmlRequest.js, a JavaScript library of functions much like ajaxutility.js.

The libXmlRequest framework revolves around two main Ajax functions: getXML and postXML. This library is XML-centric, and contains a number of functions that let you handle XML. Here’s an overview of the Ajax functions in the libXmlRequest library:

getXml(url): This is a synchronous GET request, and it returns null or an XML document object.
getXml(url, handler,1): This is an asynchronous GET request. This call returns 1 if the request was made successfully, and calls the callback function handler when the XML is downloaded.
postXml(url, data): This is a synchronous POST request, and it returns null or an XML document object.
postXml(url, data, handler, 1): This is an asynchronous POST request, and this call returns 1 if the request was made successfully, and calls the callback function handler when the XML is downloaded.

The callback functions, called handler here, are called with two parameters, and the second parameter is the one you’re interested in because it contains the downloaded XML. The xdom property of that parameter is the XML object that contains your data.

When you use this library, you must preface the names of these functions with org.cote.js.xml. to call them. For example, if you want to call the postXml function, for example, you’d call org.cote.js.xml.postXml.

How about putting the libXmlRequest framework to work in an example, testlibXmlRequest.html? For example, you might want to read the text inside the <text> element inside a file named message.xml:

 <?xml version = "1.0" ?> <text> This text was fetched using libXmlRequest. </text>

So how do you download and recover the data in message.xml using the libXmlRequest framework? You start, naturally enough, by including the libXmlRequest.js library in testlibXmlRequest.html:

 <html>   <head>     <title>Using the libXmlRequest Ajax framework</title>     <script src = "libXmlRequest.js"></script>          .          .          .

Next, you can add a button with the caption Get the message:

 <form>   <input type = "button" value = "Get the message"      .      .      . </form>

When the user clicks that button, you can call the asynchronous version of the org.cote.js .xml.getXml function to download message.xml, calling a callback function simply named callback:

 <form>   <input type = "button" value = "Get the message"     onclick = "org.cote.js.xml.getXml('message.xml',       callback, 1)"> </form>

And you might add a <div> element to display the downloaded data in, like this:

 <form>   <input type = "button" value = "Get the message"      onclick = "org.cote.js.xml.getXml('message.       callback, 1)">  </form> <div >   <p>The fetched data will go here.</p>  </div>

The callback function will be called with two parameters:

 <html>   <head>     <title>Using the libXmlRequest Ajax framework</title>     <script src = "libXmlRequest.js"></script>     <script language = "javascript">       function callback(a, b)       {         .         .         .       }     </script> </head>

The second parameter is the one of interest; its xdom property gives you access to the downloaded XML. You can use the getElementsByTagName method to get an array of XML elements; in this example, the only XML element is the <text> element, so you can get an array of <text> elements like this:

 <html>   <head>     <title>Using the libXmlRequest Ajax framework</title>     <script src = "libXmlRequest.js"></script>     <script language = "javascript">       function callback(a, b)       {        var xmlData = b.xdom.getElementsByTagName("text");         .         .         .       }     </script> </head>

This array should contain only one <text> element, in fact, because there is only one <text> element in messages.xml. You can access that <text> element as xmlData[0]. The text inside that element is stored in a text node, which is the first child node of xmlData[0]. And you can access the text inside the text node with its data property, all of which means that you can recover the text inside the <text> element and display that text like this:

 <html>   <head>     <title>Using the libXmlRequest Ajax framework</title>     <script src = "libXmlRequest.js"></script>     <script language = "javascript">       function callback(a, b)       {         var xmlData = b.xdom.getElementsByTagName("text");        var div = document.getElementById('targetDiv');        div.innerHTML = xmlData[0].firstChild.data;       }     </script> </head>

But does it work? Take a look at Figure 5.10, which shows testlibXmlRequest.html at work. When you click the button, the libXmlRequest function getXML operates behind the scenes and fetches the data from message.xml, which is displayed.

image from book
Figure 5.10: Downloading XML data using libXmlRequest

The libXmlRequest library is one Ajax framework. How about another? Take a look at AJAXLib, which is discussed next.