AJAX database example

The given below example will explain how a web page can fetch information from a database with AJAX technology.

The showUser() function Calls the GetXmlHttpObject() function to create an XMLHTTP object. It defines an URL (filename) to send to the server. After that It Adds a parameter (q) to the URL with the content of the drop-down box and Adds a random number to prevent the server from using a cached file. Each time the readyState property changes, the stateChanged() function will be executed. It Opens the XMLHTTP object with the given URL and finally Sends an HTTP request to the server.

The PHP page called by the JavaScript, is called "getuser.php". The PHP script runs an SQL query against a MySQL database, and returns the result as HTML. When the query is execute from the JavaScript to the PHP page, the following happens:

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

When the user selects data, a function called "showUser()" is executed. The execution of the function is triggered by the "onchange" event.

selectcustomer.js
var xmlhttp;



function showUser(str)

{

xmlhttp=GetXmlHttpObject();

if (xmlhttp==null)

  {

  alert ("Browser does not support HTTP Request");

  return;

  }

var url="getuser.php";

url=url+"?q="+str;

url=url+"&sid="+Math.random();

xmlhttp.onreadystatechange=stateChanged;

xmlhttp.open("GET",url,true);

xmlhttp.send(null);

}



function stateChanged()

{

if (xmlhttp.readyState==4)

{

document.getElementById("txtHint").innerHTML=xmlhttp.responseText;

}

}



function GetXmlHttpObject()

{

if (window.XMLHttpRequest)

    {

    // code for IE7+, Firefox, Chrome, Opera, Safari

    return new XMLHttpRequest();

    }

if (window.ActiveXObject)

    {

    // code for IE6, IE5

    return new ActiveXObject("Microsoft.XMLHTTP");

    }

return null;

}
_________________________________________________________________
<html>

<head>

<script type="text/javascript" src="selectuser.js"></script>

</head>

<body>



<form>

Select a User:

<select name="users" onchange="showUser(this.value)">

<option value="1">Sandeep</option>

<option value="2">Anusmita</option>

<option value="3">Suman</option>

<option value="4">Goldee</option>

</select>

</form>

<br />

<div id="txtHint"><b>Person info will be listed here.</b></div>



</body>

</html> 
__________________________________________________________________
getuser.php
<?php

$q=$_GET["q"];



$con = mysql_connect('localhost', 'peter', 'abc123');

if (!$con)

  {

  die('Could not connect: ' . mysql_error());

  }



mysql_select_db("ajax_demo", $con);



$sql="SELECT * FROM user WHERE id = '".$q."'";



$result = mysql_query($sql);



echo "<table border='1'>

<tr>

<th>Firstname</th>

<th>Lastname</th>

<th>Age</th>

<th>Hometown</th>

<th>Job</th>

</tr>";



while($row = mysql_fetch_array($result))

  {

  echo "<tr>";

  echo "<td>" . $row['FirstName'] . "</td>";

  echo "<td>" . $row['LastName'] . "</td>";

  echo "<td>" . $row['Age'] . "</td>";

  echo "<td>" . $row['Hometown'] . "</td>";

  echo "<td>" . $row['Job'] . "</td>";

  echo "</tr>";

  }

echo "</table>";



mysql_close($con);

?>