Ajax Example
Screen shot
PHP Page
<?php
$con=mysql_connect(\'localhost\',\'root\',\'\') or die(\'Mysql not connected\');
mysql_select_db(\'product\',$con) or die(\'DataBase not connected\');
?>
<html>
<head>
<script type=\"text/javascript\" src=\"ajax.js\">
</script>
</head>
<body>
<table width=\"100%\" height=\"226\" border=\"1\" align=\"center\" cellpadding=\"0\" cellspacing=\"0\">
<tr>
<td width=\"26%\" height=\"21\">Product Category</td>
<td width=\"74%\">&nbsp;</td>
</tr>
<tr>
<td height=\"182\" valign=\"top\">
<?php
$query=\"select * from tbl_category\";
$query_result=mysql_query($query)or mysql_error();
while($row=mysql_fetch_array($query_result))
{
?>
<a href=\"javascript:product(<?php echo $row[\'id\']; ?>)\"><?php echo $row[\'cat_name\']; ?></a><br>
<?php
}
?>
</td>
<td valign=\"top\"><div id=\"showproducts\">
Your Product show here
</div>
</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
<br />
</body>
</html>

Javascript Page (save as ajax.js)
<html>
<body>
<script type=\"text/javascript\" language=\"javascript\">
var XMLHttpRequestObject=false;

function product(cat_id)
{

if(window.XMLHttpRequest)
{
XMLHttpRequestObject=new XMLHttpRequest();
}
else if(window.ActiveXObject)
{
XMLHttpRequestObject=new ActiveXObject(\"Microsoft.XMLHTTP\");
}


XMLHttpRequestObject.onreadystatechange=function()
{
if (XMLHttpRequestObject.readyState==4 && XMLHttpRequestObject.status==200)
{
document.getElementById(\"showproducts\").innerHTML=XMLHttpRequestObject.responseText;
}
}
XMLHttpRequestObject.open(\"GET\",\"showproducts.php?id=\"+cat_id,true);
XMLHttpRequestObject.send();
}
</script>
</body>
</html>

PHP Page(save as showproducts.php)
<?php
$con=mysql_connect(\'localhost\',\'root\',\'\') or die(\'Mysql not connected\');
mysql_select_db(\'product\',$con) or die(\'DataBase not connected\');

$id=$_GET[\"id\"];
$query=\"select * from tbl_productdetails WHERE cat_id = \'\".$id.\"\'\";
$result = mysql_query($query);
while($row = mysql_fetch_array($result))
{
?>
<img src=\"<?php echo \"flowers/\".$row[\'product_image\']; ?>\" />
<?php
}
?>

DataBase
--
-- Database: `product`
--

-- --------------------------------------------------------

--
-- Table structure for table `tbl_category`
--

CREATE TABLE IF NOT EXISTS `tbl_category` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`cat_name` varchar(255) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=5 ;

--
-- Dumping data for table `tbl_category`
--

INSERT INTO `tbl_category` (`id`, `cat_name`) VALUES
(1, \'Red Flower\'),
(2, \'Blue Flower\'),
(3, \'Green Flower\'),
(4, \'Yellow Flower\');

-- --------------------------------------------------------

--
-- Table structure for table `tbl_productdetails`
--

CREATE TABLE IF NOT EXISTS `tbl_productdetails` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`cat_id` int(11) NOT NULL,
`product_image` varchar(255) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=8 ;

--
-- Dumping data for table `tbl_productdetails`
--


INSERT INTO `tbl_productdetails` (`id`, `cat_id`, `product_image`) VALUES
(1, 1, \'red1.jpeg\'),
(2, 1, \'red2.jpeg\'),
(3, 4, \'yellow1.jpeg\'),
(4, 2, \'blue1.jpeg\'),
(5, 2, \'blue2.jpeg\'),
(6, 3, \'green1.jpeg\'),
(7, 4, \'yellow2.jpeg\');

You can download source code here