AJAX - Database

AJAX Database

AJAX can be used for interactive communication with a database. The following example will demonstrate how a web page can fetch information from a database with AJAX:

Employee info will be listed here...

Example Explained - The HTML Page

When a user selects a user in the dropdown list above, a function called "showEmployee()" is executed. The function is triggered by the "onchange" event:

<html>
<head>
<script type="text/javascript">
function showEmployee(str)
{
var xmlhttp;    
if (str=="")
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","phpresult.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>

<form action=""> 
<select name="customers" onchange="showEmployee(this.value)">
<option value="">Select an Employee:</option>
<option value="1">Putra Angkasa</option>
<option value="2">Bayu Segara</option>
<option value="3">Mega Ayuning</option>
</select>
</form>
<br />
<div id="txtHint">Employee info will be listed here...</div>

</body>
</html>

The showEmployee() function does the following:

Check if a person is selected
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 (q) is added to the URL (with the content of the dropdown list)

The page on the server called by the JavaScript above is a PHP file called "phpresult.php".

The source code in "phpresult.php" runs a query against a MySQL database, and returns the result in an HTML table:

<?php
$nameserv = "localhost";
$username = "root";
$pass = "";
$dbname = "your_db_name";
$koneksi = mysql_connect($nameserv,$username,$pass)or die(mysql_error());
$selecdb = mysql_select_db($dbname);
$q = $_GET['q'];
$sql = mysql_query("SELECT *FROM db_ajax WHERE custID = '".$q."'");
$row = mysql_fetch_array($sql);
echo "<table border='1' cellspacing='0' cellpadding='3px'>
<tr><td style='font-weight : bold;width : 160px;'>Customer ID</td><td style='width : 250px;'>: ".$row['custID']."</td></tr>
<tr><td style='font-weight : bold'>Customer Name</td><td>: ".$row['custName']."</td></tr>
<tr><td style='font-weight : bold'>Customer Address</td><td>: ".$row['custAddress']."</td></tr>
<tr><td style='font-weight : bold'>Customer Email</td><td>: ".$row['custEmail']."</td></tr>
<tr><td style='font-weight : bold'>Customer Phone</td><td>: ".$row['custPhone']."</td></tr>
<tr><td style='font-weight : bold'>Customer Company</td><td>: ".$row['custCompany']."</td></tr>
<tr><td style='font-weight : bold'>Customer Department</td><td>: ".$row['custDepartment']."</td></tr>
<tr><td style='font-weight : bold'>Customer Position</td><td>: ".$row['custPosition']."</td></tr>
</table>";

mysql_close($koneksi);
?>

Explanation: When the query is sent from the JavaScript to the PHP file, the following happens:

PHP opens a connection to a MySQL server
The correct person is found
An HTML table is created, filled with data, and sent back to the "txtHint" placeholder

The Complete Database AJAX Downloads

php-ajax.zip

Tutorial

References

HTML & CSS References
HTML References
HTML 5.0 References
CSS References
CSS 3 References
Browser Scripting Ref.
Javascript References
HTML DOM References
Server Scripting Ref.
PHP References

AJAX - Database

AJAX Database

Example Explained - The HTML Page

The PHP File

The Complete Database AJAX Downloads

Tutorial

References

Other Tutorials

Links

About Us

Tools

Accounts