Creating a Dynamic Banner System with AJAX - Listing the banner application's full source code
(Page 5 of 5 )
As I stated in the section that you just read, here are the respective definitions of all the files for this dynamic banner application. Please take a look at them:
(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=!$_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. |
/ 6 
