Reading Data from an XML File for a Dynamic AJAX-based Banner System - Reintroducing the source files of the initial banner application
(Page 2 of 4 )
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 >>
More JavaScript Articles
More By Alejandro Gervasio
