Slashdot

Pages

Wednesday, June 16, 2010

Friday, June 4, 2010

Dynamic Content-Ajax and PHP

AJAX = Asynchronous JavaScript and XML.

AJAX is a technique for creating fast and dynamic web pages.

AJAX is a very powerful system which enables dynamic, constantly changing content on a page without refreshing the page.

AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes

This article is show how to access dynamic data through ajax and php

Simple Example Display books details through mouseover events

Ajaxscript :ajaxfunctions.js

  • Create an XMLHttpRequest object
  • Create the function to be executed when the server response is ready
  • Send the request off to a file on the server
  • Notice that a parameter is added to the URL
Database Connection:Connection.php

This is used to create database connection

Main Page: bookdetsils.php

This Page is Used to display and access dynamic content

Dynamic Page: action.php

This page is used to retrieve data based on ajax call

Dynamic Content Page

action.php


<?php
include_once "connection.php";
$con=db_connection_open();
$b_id=$_GET ['b_id'];
$sql="select * from bookmaster where b_id=$_GET ['b_id']";
$rs=mysql_query($sql);
$row=mysql_fetch_array($rs);
$publisher_name=$row['publiser'];
$b_pic=$row['bookpic'];
$b_cost=$row['bookcost'];
$book_synopis=$row['booksynopsis'];
echo '<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="top" width="25%"><b>publisher Name:</b></td>
<td valign="top">$publisher_name</td>
<td align="right" valgn="top" rowspan="2">"ssss"</td>
</tr>
<tr>
<td> valign="top" width="45%"><b>book cost:</b> </td>
<td valign="top">$b_cost</td>
</tr>
<tr>
<td colspan="3" valign="top" width="45%"><b> book Synopsis:</b><br>$book_synopsis.</td>
</tr>
</table>';
?>

Database Connection

connection.php


<?php
function db_connection_open()
{
$servername='localhost'; // Your MySql Server Name or IP address here
$dbusername=''; // Login user id here
$dbpassword=''; // Login password here
$dbname=''; // Your database name here
$link=mysql_connect ("$servername","$dbusername","$dbpassword");
if(!$link){die("Could not connect to MySQL");}
mysql_select_db("$dbname",$link) or die ("could not open db".mysql_error());
return($link);

}
?>

Dynamic Content using PHP and Ajax

bookdetails.php

<?php
include_once "connection.php";
?>
<html>

<head>
<title>dynamic content</title>
<script src="ajaxfunctions.js"></script>
</head>

<body>



<table width="90%" align="CENTER" cellpadding="0" cellspacing="0" bgcolor="#AA7FFF" border="1" bordercolor="#0000FF" name="tblparent">
<tr valign="top">
<td width=30%>
<?php $sql="select * from bookmaster";
$con=db_connection_open();
$rs=mysql_query($sql) or die("error");
$numrows=mysql_num_rows($rs);
if($numrows)
{
?>
<table width="100%" align="LEFT" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" border="1" name="tblScondChild">
<tr bgcolor="black">
<td> <font color="#ffffff"><b>Books</b>
</font></td>
</tr>
<?php
$i=0;
while($i<$numrows)
{
if($i%2)
{
$bgcolor="pink";
}
else
{
$bgcolor="lightpink";
}
?>
<tr height="40" style="cursor:pointer;" bgcolor="<?=$bgcolor?>" onMouseOver="this.bgcolor='#ffffff';" >
<td onmouseover="displaybookinfo(<?=mysql_result($rs,$i,'b_id')?>);" WARP>
<?=mysql_result($rs,$i,'bookname');?>
</td>
</tr>
<?php
$i++;
}
?>
</table>
<?php
}
mysql_close($con);
?>
</td>
<td>
<table width="100%" height="335" align="LEFT" cellpadding="0" cellspacing="0" border="1" bordercolor="#FFFFFF" name="tblthirdchild">
<tr bgcolor="black" height="10">
<td> <font color="#ffffff"><b>Book Details</b></font></td>
</tr>
<tr>
<td valign="top"><div id="bookpanel"></div></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Ajax Script:
Script Name:ajaxfunctions.js

function createrequestobject()
{
var xmlhttp=false;
try
{
xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
xmlhttp=new ActiveXobject("Microsoft.XMLHTTP");
}
catch(e)
{
xmlhttp=false;
}
}
if(!xmlhttp && typeof XMLHttpRequest != 'undefined')
{
xmlhttp=new XMLHttpRequset();

}
return xmlhttp;
}

function displaybookinfo(bk_id)
{
var request=createrequsetobject();
request.open('GET','action.php?&b_id='+bk_id,true);
request.onreadystatechange=function()
{
if(requset.readystate == 4)
{
if(request.status == 200)
{
var.response=requset.responseText;
document.getElementById('bookpanel').innerHTML=respose;
}

}
}
requset.send(null);
}