Example of AJAX and PHP

Hello Friends !

Here I explain one Example how AJAX used in PHP ?

First create a database displayed below:

id FirstName LastName Age Hometown Job
1 Peter Griffin 41 Quahog Brewery
2 Lois Griffin 40 Newport Piano Teacher
3 Joseph Swanson 39 Quahog Police Officer
4 Glenn Quagmire 41 Quahog Pilot

Then You have to create HTML form:

<html>
<head>
<script src="selectuser.js"></script>
</head>
<body>
<form>
Select a User:
<select name="users" onchange="showUser(this.value)">
<option value="1">Peter Griffin</option>
<option value="2">Lois Griffin</option>
<option value="3">Glenn Quagmire</option>
<option value="4">Joseph Swanson</option>
</select>
</form>
<p>
<div id="txtHint"><b>User info will be listed here.</b></div>
</p>
</body>
</html>

Let Me Explained :

The HTML Form :

As you can see it is just a simple HTML form with a drop down box called “users” with names and the “id” from the database as option values.

The paragraph below the form contains a div called “txtHint”. The div is used as a placeholder for info retrieved from the web server.

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

In other words: Each time the user changes the value in the drop down box, the function showUser() is called.

Javascript used in AJAX

This javascript saved as’selectuser.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 || xmlHttp.readyState=="complete")
 {
 document.getElementById("txtHint").innerHTML=xmlHttp.responseText;
 }
}
function GetXmlHttpObject()
{
var xmlHttp=null;
try
 {
 // Firefox, Opera 8.0+, Safari
 xmlHttp=new XMLHttpRequest();
 }
catch (e)
 {
 //Internet Explorer
 try
  {
  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  }
 catch (e)
  {
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
 }
return xmlHttp;
}

The showUser() Function

If an item in the drop down box is selected the function executes the following:

  1. Calls on the GetXmlHttpObject function to create an XMLHTTP object
  2. Defines the url (filename) to send to the server
  3. Adds a parameter (q) to the url with the content of the dropdown box
  4. Adds a random number to prevent the server from using a cached file
  5. Call stateChanged when a change is triggered
  6. Opens the XMLHTTP object with the given url.
  7. Sends an HTTP request to the server

At Last You have to create one PHP page on which you want Result :

This PHP form shown below .

The PHP Page

The server page called by the JavaScript, is a simple PHP file called “getuser.php”.

The page is written in PHP and uses a MySQL databse.

The code runs a SQL query against a database and returns the result as an HTML table:

<?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);
?>

When the query is sent from the JavaScript to the PHP page the following steps are occures:

  1. PHP opens a connection to a MySQL server
  2. The “user” with the specified name is found
  3. A table is created and the data is inserted and sent to the “txtHint” placeholder

If you like my post then please comment on this.

Thanks……

  • http://roomaddress.com Ajay Gairola

    how do i develop this code in cake php

  • syu

    hello, I had tried this code but I want to display the result in a text box. The user was found and it displayed in the text box. But only one word appeared in the text box. I don’t want to separate the user name to first name and last name. So, the user name is in one field only. So, for example the user name is ‘hulk hogan’. Only hulk displayed in the text box. When I just displayed it without the text box, the name displayed all word, ‘hulk hogan’. So, what should I do so the name in text box will display all word. Please help me.