Home arrow JavaScript arrow Page 4 - 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 - Completing the dynamic banner system
(Page 4 of 5 )

As you'll recall from the previous section, it's necessary to build a simple PHP script that is capable of sending back to the client the correct banner image, along with its respective URL, each time an HTTP request is triggered by the AJAX application that you saw previously.

Therefore, below I included the definition of the aforementioned script, which simply fetches the data corresponding to each banner from a plain text file named "banners.txt."

Here's how the script looks:

(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();
}
?>

Indeed, after studying the signature of the above script, you'll grasp very quickly how it works, since all it does is read the contents of the "banners.txt" file and send the appropriate banner data back to the client.

In addition, I included below the definition of a basic "banners.txt" file, which has been previously populated with some sample banner images and a few fictional links:

(definition of "banners.txt" file)

banner1.gif|http://www.myhosting.com
banner2.gif|http://www.myphp.com
banner3.gif|http://www.myjs.com

All right, at this point you hopefully understand how the above PHP script sends a different banner to the browser each time an HTTP request is triggered via AJAX. However, I'm sure you want to see the full source code of this banner application, so you can grasp more easily how the modules of this application are linked to each other. 

In the following section I'm going to show you all of the source files that comprise this application. Jump ahead and read the next few lines. I'll be there, waiting for you.


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