Home arrow JavaScript arrow Page 5 - Creating a Dynamic Banner System with AJAX
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
Rating: 4 stars4 stars4 stars4 stars4 stars / 12
July 30, 2007
TABLE OF CONTENTS:
  1. · Creating a Dynamic Banner System with AJAX
  2. · Creating a system of dynamic banners
  3. · Displaying the banners on the browser using AJAX
  4. · Completing the dynamic banner system
  5. · Listing the banner application's full source code

print this article
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
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.

blog comments powered by Disqus
JAVASCRIPT ARTICLES

- More Top jQuery Tutorials for Beginners
- More Top jQuery Plugins for Menus
- Top jQuery Tutorials for Beginners
- New UI Framework and SDK for JavaScript Rele...
- JavaScript OpenPGP Tool, Node.js 0.6.3 Avail...
- Yahoo Releases Cocktails Language and Develo...
- Customizing jQuery Slideshows: Dynamic Contr...
- Customizing jQuery Slideshows: the animate()...
- Customizing jQuery Slideshows: slideUp() and...
- Customizing jQuery Slideshows: hide() and sh...
- Web Workers: Performing Calculations in Para...
- More Top JavaScript Frameworks and Libraries
- More Dynamic jQuery Styling Techniques
- The Top JavaScript Libraries
- The Top JavaScript Frameworks

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



© 2003-2012 by Developer Shed. All rights reserved. DS Cluster 6 - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials