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:

Actually, before I start showing you how to move all the banner-related data to a basic XML file and display this content on the browser with AJAX, first I'd like to list all the source files that comprised the original application. This will help you to spot more clearly the differences between the previous version and the one that I plan to build in this tutorial.

Please take a look at the definition of the following source files, which as I said before, composed the initial structure of this AJAX-driven banner application. Here they are:

(definition of "dynamic_banner.htm" file)

<!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);
}
// display banners
function displayBanner(bannerData){
   // parse banner data
   var bannerImg=bannerData.split('|')[0];
   if(!bannerImg){return};
   var bannerUrl=bannerData.split('|')[1];
   if(!bannerUrl){return};
   var bannerCont=document.getElementById('bannercontainer');
   if(!bannerCont){return};
   // clean up banner container
   bannerCont.innerHTML='';
   // create banner link
   var a=document.createElement('a');
   a.setAttribute('href',bannerUrl);
   // create banner image
   var img=document.createElement('img');
   // set banner image dimensions
   img.setAttribute('src',bannerImg);
   img.setAttribute('width',180);
   img.setAttribute('height',400);
   // append banner image to link
   a.appendChild(img);
   // append banner link to container
   bannerCont.appendChild(a);
   // increase banner counter
   bannerId++;
   if(bannerId>2){bannerId=0};
   // fetch banner recursively
   setTimeout("sendHttpRequest('fetchbanner.php?
bannerid="+bannerId+"','displayBanner')",3*1000);
}
// initialize banner counter
bannerId=0;
window.onload=function(){
   if(document.getElementById&&document.
getElementsByTagName&&document.createElement){
     // display first banner
     sendHttpRequest('fetchbanner.php?
bannerid='+bannerId,'displayBanner');
   }
}
</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>

(definition of "fetchbanner.php" file)

<?php
try{
   if(!$banners=file('banners.txt')){
     throw new Exception('Error reading banners file');
   }
   $bannerId=!$_['bannerid']||$_GET['bannerid']<0||$_['bannerid']
>count($banners)?0:trim($_GET['bannerid']);
   echo $banners[$bannerId];
}
catch(Exception $e){
   echo $e->getMessage();
   exit();
}
?>

(definition of "banners.txt" file)

banner1.gif|http://www.myhosting.com
banner2.gif|http://www.myphp.com
banner3.gif|http://www.myjs.com

At this stage I assume that the respective definitions for all of the above source files should be quite familiar to you, since they were profusely covered in the previous part of the series. Still, in this case it's worthwhile to explain quickly how the previous application works, to dissipate any possible doubts that you might have.

In simple terms, the above "dynamic_banner.htm" file is actually the workhorse of the banner application, since it performs some crucial tasks. It fetches from the web server the successive banners via AJAX, and also controls the sequence in which they're displayed on the browser by using a unique JavaScript variable.

All of the banner-related data is read directly from a basic text file, called "banners.txt," whose signature has been shown a few lines above. Finally, the "fecthbanner.php" file is responsible for sending this data back to the browser for further processing. Quite simple to grasp, isn't it?

Well, provided that you already understand the logic that drives the prior banner application, it's a good time to step forward and learn how to modify some part of its behavior layer so that all of the banner information can be stored in a well-structured XML file. This lets us take advantage of the neat XML capacities that come integrated with AJAX.

Considering this potential improvement to the application, in the next few lines I'm going to create a slightly modified version of the "displayBanner()" JavaScript function that you saw before, to provide it with the ability to read banner data straight from the aforementioned XML file.

To see how this will be done, keep reading please.

Next: Fetching banner data from an XML file >>