JAVASCRIPT

Creating a Dynamic Banner System with AJAX

AJAX has proven itself useful in a variety of web applications. In this three-part article series, you will learn how to use AJAX to display commercial banners dynamically on your web site. This first article will show you how to develop the basic script.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 12

July 30, 2007

TABLE OF CONTENTS:

<!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=!$_GET['bannerid']||$_GET['bannerid']<0||$_GET
['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

As shown above, these are all the source files (aside from the banner images) you need to implement this AJAX-based banner application on any web site. As usual, feel free to modify all of the hands-on examples shown in this tutorial, so you can introduce your own improvements into the original application.

Final thoughts

In this first part of the series, I walked you through the process of developing a simple AJAX-driven application for displaying on the browser a specific number of banners based upon a predefined time sequence.

Nevertheless, as you'll possibly have noticed, I used a simple text file to store the data corresponding to each banner in the web server. Thus, in the next tutorial I'm going to modify the logic of the application so that this banner-related data can be fetched directly from an XML file.

Want to see how this will be done? Don't miss the next part!

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.