If you're new here, you may want to subscribe to my RSS feed. So that you can read the latest updates about Web2.0 tools, Making Money Online, Tips in SEO, Ajax and many more. Thanks for visiting ProgramimiCOM!

Note: In order to use this tutorial, you need to have the prototype javascript library.

My earlier post on Prototype talked about two of the basic functions, now we’re going to use those functions along with the built-in AJAX functions to make a simple little application. Our application is simply for dummy purposes, but will tell us who has birthdays in certain months. In our script, we will first have to include the Prototype and script.aculo.us libraries; Prototype must be called first!

We will be using the Ajax.Request function which takes a two paramaters, the URL of the handler, and the options. Options specify which method we will be using, the data we send, and what to do when the script completes. All the JavaScript coded by us is a mere 5 lines!

We’re going to setup our table first, which is really simple, just run this query on your database:

CREATE TABLE `birthdays` (`name` varchar(255) NOT NULL DEFAULT ‘’, `age` int(3) NOT NULL DEFAULT ‘0?,  `day` int(2) NOT NULL DEFAULT ‘0?, `month` int(2) NOT NULL DEFAULT ‘0?) ENGINE=InnoDB DEFAULT CHARSET=latin1

Next, we will code the AJAX handler script which receives a month number, then fetches all birthdays in that month:

mysql_connect(‘localhost’, ‘root’, ‘’);
mysql_select_db(‘tutorials’);
$query = mysql_query(“SELECT `name`, `age`, `day` FROM `birthdays` WHERE `month` = ‘{$_POST[’month’]}’”);
$out = “<ul>”;
if(mysql_num_rows($query) > 0)
{
while($r = mysql_fetch_row($query))
{
$out .= “<li>{$r[0]} turns {$r[1]} on the {$r[2]}</li>”;
}
}
else
{
echo “No birthdays in this month!”;
}
$out .= “</li>”;
echo $out;
?>

This is not complicated code, just a simple SELECT query and a while loop. Now, you may ask how we get the month number? That’s what Prototype sends us through post (you can use get, too). Whatever we echo, Prototype will get and store in the AJAX object as you will see shortly.

Our JavaScript contains one function! It starts and handles the request all at once.

function fetch_birthdays()
{
var month = $F(‘month’);
new Ajax.Request(‘ajax.php’, {method:‘post’, postBody:‘month=’ + month, onSuccess: function(t) { $(‘birthdays’).innerHTML = t.responseText; }});
}

We make use of our $F and $ functions; $F to get the current month from our select (which you’ll see later), and $ to update the div’s contents with the birthdays. Our AJAX request tells that the handler will be ajax.php, the method withh be post, and the data to send is month = whatever the month currently is. The onSuccess part may look weird to you. All we’re really doing is passing our AJAX object as a paramter (Prototype handles this), and then updating our div with the server’s response text, which will be an ordered list with birthdays!

The only part left is creating our form and update div, which is simple:

<h2>Birthdays</h2>
<p>Select a month from the drop down to see whose birthdays are in each month.</p>
<form name=‘months’>
<select id=‘month’>
<option value=‘1?>January</option>
<option value=‘2?>February</option>
<option value=‘3?>March</option>
<option value=‘4?>April</option>
<option value=‘5?>May</option>
<option value=‘6?>June</option>
<option value=‘7?>July</option>
<option value=‘8?>August</option>
<option value=‘9?>September</option>
<option value=‘10?>October</option>
<option value=‘11?>November</option>
<option value=‘12?>December</option>
</select>
<input type=‘button’ value=‘get birthdays’ onclick=“fetch_birthdays();” />
</form>
<div id=‘birthdays’></div>

Our button will call the fetch_birthday function which starts the AJAX request. . .