JAVASCRIPT

Reading Data from an XML File for a Dynamic AJAX-based Banner System

Undeniably, AJAX has introduced a noticeable impact into the development of rich web applications, and consequently there are many enthusiastic web developers that continue discovering more and more creative uses for this powerful technology. Particularly, in this series of articles this "creativity" is focused entirely upon building an AJAX-driven banner application for displaying, on the browser, a certain number of banners via a few HTTP requests made in the background.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 4

July 31, 2007

TABLE OF CONTENTS:

As I stated in the previous section, the next step we need to take to provide the core application with the capacity for reading the corresponding banner data from a single XML file consists of modifying the definition of the "displayBanner()" JavaScript function that you learned before. It needs to be modified so that it can read this data using the popular "responseXML" property exposed by an HTTP request object, in this way avoiding the need to code an extra PHP file.

Speaking more specifically, the improved version of this function has been included in the following file. Please take a look at it:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-
8859-1" />
<title>AJAX-Driven Dynamic Banner System</title>
<script language="javascript" type="text/javascript">
// send http requests
function sendHttpRequest(url,callbackFunc,respXml){
   var xmlobj=null;
   try{
     xmlobj=new XMLHttpRequest();
   }
   catch(e){
     try{
       xmlobj=new ActiveXObject("Microsoft.XMLHTTP");
     }
     catch(e){
       alert('AJAX is not supported by your browser!');
       return false;
     }
   }
   xmlobj.onreadystatechange=function(){
     if(xmlobj.readyState==4){
       if(xmlobj.status==200){
         respXml?eval(callbackFunc+'(xmlobj.responseXML)'):eval
(callbackFunc+'(xmlobj.responseText)');
       }
     }
   }
   // open socket connection
   xmlobj.open('GET',url,true);
   // send http header
   xmlobj.setRequestHeader('Content-Type','text/plain;
charset=UTF-8');
   // send http request
   xmlobj.send(null);
}
// store banners into JavaScript array
function storeBanners(banners){
   var banners=banners.getElementsByTagName('banner');
   if(!banners){return};
   // save banner data to JS arrays
   for(var i=0;i<banners.length;i++){
     images[i]=banners[i].getElementsByTagName('image')
[0].firstChild.nodeValue;
     urls[i]=banners[i].getElementsByTagName('url')
[0].firstChild.nodeValue;
   }
   // display first banner
   displayBanner();
}
// display banners
function displayBanner(){
   var bannercont=document.getElementById('bannercontainer');
   if(!bannercont){return};
   // clean up headlines container
   bannercont.innerHTML='';
   // create <img> element
   var img=document.createElement('img');
   img.setAttribute('src',images[index]);
   // create <a> element
   var a=document.createElement('a');
   a.setAttribute('href',urls[index]);
   img.setAttribute('width',180);
   img.setAttribute('height',400);
   a.appendChild(img);
   // append banner to banner container
   bannercont.appendChild(a);
   index++;
   if(index>urls.length-1){index=0};
   setTimeout("displayBanner()",15*1000);
}
// initialize data arrays and index
var images=new Array();
var urls=new Array();
var index=0;
window.onload=function(){
   if(document.getElementById&&document.
getElementsByTagName&&document.createElement){
     // fetch the first banner after loading the web page
     sendHttpRequest('banners.xml','storeBanners',true);
   }
}
</script>
<style type="text/css">
body{
   margin: 0;
   padding: 0;
   background: #eee;
}

h1{
   text-align: center;
   font: bold 24px Arial, Helvetica, sans-serif;
   color: #000;
}

#bannercontainer{
   text-align: center;
   width: 180px;
   height: 400px;
   margin-left: auto;
   margin-right: auto;
   background: #fff;
   border: 1px solid #000;
}

#bannercontainer img{
border: none;
}
</style>
</head>
<body>
<h1>AJAX-Driven Dynamic Banner System</h1>
<div id="bannercontainer"></div>
</body>
</html>

As you can see, the above (X)HTML file now includes a new version of the pertinent "displayBanner()" JavaScript function. In this case, the definition of the function has been changed to read the respective banner data from a "banners.xml" file, and to display the banners in question using the same JavaScript timer that you learned in the previous tutorial.

In addition, it should be noticed that this new implementation for this function introduces a remarkable improvement in the way that the whole application works. On the one hand all of the banner information now resides in a highly-maintainable XML file, and on the other hand, it's not necessary to code an additional PHP file to read this file from the web server. Pretty neat, right?

All right, having demonstrated how to improve the whole functionality of this AJAX-driven banner application by changing the signature of only one of its functions, it's time to move forward and see its complete source code, this time including the corresponding definition of the "banners.xml" file referenced previously.

As you might guess, this will be done in the last section of this article, so jump ahead and read the next few lines. I'll be there, waiting for you.

Next: Completing the improved AJAX-based banner application >>