Storing Banner Data in MySQL Tables for a Dynamic Banner System with AJAX - Fetching banner data from MySQL
(Page 3 of 4 )
In accordance with the concepts expressed in the previous section, the next step is to create a primitive database table for storing the images and URLs of every banner that needs to be displayed.
Based upon this schema, below I included the definition of a sample "banners" MySQL table, which has been populated with the banner data used in the two previous articles of the series.
This MySQL database table looks like this:
id image url
1 banner1.gif http://www.myhosting.com
2 banner2.gif http://www.myphp.com
3 banner3.gif http://www.myjs.com
The above table was indeed easy to create, right? As you can see, all of the banner-related data now resides neatly in a basic database, which implies that pulling out the pertinent records is reduced to using the same pair of JavaScript functions that you learned previously.
Therefore, now the complete client-side code required to fetch the banners from the MySQL database table defined earlier would look like this:
<!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);
// fetch banner recursively
setTimeout("sendHttpRequest
('fetchbanner.php','displayBanner')",15*1000);
}
window.onload=function(){
if(document.getElementById &&
document.getElementsByTagName && document.createElement){
// fetch first banner
sendHttpRequest
('fetchbanner.php','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>
As shown above, the general structure of this banner system remains nearly identical, since it uses the same JavaScript functions defined in the previous articles of the series. Of course, in this case the different banners will be fetched at a predefined time interval from the prior "banners" database table, instead of using a XML file, but the rest of the application's logic remains unmodified.
Okay, now that you have seen how easy it was to adapt the original structure of this banner application to fetch the banners from a basic MySQL database table, it's time to develop a simple PHP script. This script will be tasked with sending the appropriate banner data to the browser each time an AJAX-based HTTP request is triggered by the application.
To learn how this script will be built, please go ahead and read the next few lines. I'll be there, waiting for you.
Next: Completing the banner application >>
More JavaScript Articles
More By Alejandro Gervasio
/ 5 
