Reading Data from an XML File for a Dynamic AJAX-based Banner System - Fetching banner data from an XML file
(Page 3 of 4 )
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 >>
More JavaScript Articles
More By Alejandro Gervasio
