Using AJAXLib to Download XML

AJAXLib is a very simple Ajax framework that you can pick up for free at http://karaszewski.com/tools/ajaxlib/. The actual framework’s JavaScript library is named ajaxlib.js.

How do you use it? This framework is easy to use: All you have to do is pass this library’s loadXMLDoc function, passing that function the URL to your XML source, the callback function to call after the XML is downloaded, and a true/false parameter that lets you remove white space in the downloaded XML (true means AJAXLib should remove white space). When the XML is downloaded, the XML will be accessible in a variable named resultXML.

How about an example? Say you wanted to read the text from a new XML document, message2.xml, which contains these contents:

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

Doing so using the AJAXLib library is simple. You start, as you’d expect, by including ajaxlib.js in your Web page, testAJAXLib.html:

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

To download the XML, you can connect a button to the AJAXLib loadXMLDoc function, indicating that you want to download message2.xml, call a function named callback when the XML has been downloaded, and not remove white space in the XML:

 <body>   <H1>Using the AJAXLib Ajax framework</H1>   <form>     <input type = "button" value = "Get the message"       onclick = "loadXMLDoc('message2.xml', callback, false)">   </form>

You’ll also need a <div> element to display the downloaded XML data:

 <form>   <input type = "button" value = "Get the message"     onclick = "loadXMLDoc('message2. </form> <div >   <p>The fetched data will go here.</p> </div>

The loadXMLDoc function does its thing and, if successful, calls the callback function. In that function, you can access the resultXML variable, introduced into your page by AJAXLib. That variable holds the downloaded XML, stored as a JavaScript XML document object, so you can use the getElementsByTagName method to recover all the <text> elements that have been downloaded:

 <html>   <head>     <title>Using the AJAXLib Ajax framework</title>     <script src = "ajaxlib.js"></script>     <script language = "javascript">       function callback()       {         var xmlData = resultXML.getElementsByTagName("text");         .         .         .       }     </script> </head>

Because there’s only one <text> element in the array created using getElementsByTagName, you can access that element as xmlData[0]. The rest of the process for extracting the text data from that element is the same as with the libXmlRequest library, so here’s how you can display the downloaded data:

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

How does it look in practice? As you’d expect. Take a look at Figure 5.11, where the user has clicked the button and the loadXMLDoc function has done its thing, downloading the data, which has been displayed by the page. Very nice.

image from book
Figure 5.11: Downloading XML data using AJAXLib