«
»

16 May

PHP Example – AJAX Suggest

Posted by navid100 in PHP. Tagged: , , , , .

AJAX can be used to create more interactive applications.

AJAX Suggest example

The following AJAX example will demonstrate how a web page can communicate with a web server while a user enters data into an HTML form.

Type a name in the input field below:

First name: Suggestions:

Example explained – The HTML page

The HTML page contains a link to an external JavaScript, a simple HTML form, and a span element:

<html>
<head>
<script type=”text/javascript” src=”clienthint.js”></script>
</head>
<body>

<form>
First Name: <input type=”text” id=”txt1″ onkeyup=”showHint(this.value)” />
</form>
<p>Suggestions: <span id=”txtHint”></span></p>

</body>
</html>

The HTML form above has an input field called “txt1″. An event attribute for this field defines a function to be triggered by the onkeyup event.

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

When a user inputs data, the function called “showHint()” is executed. The execution of the function is triggered by the “onkeyup” event. In other words: Each time a user moves the finger away from a keyboard key inside the input field, the function showHint is called.

Example explained – The JavaScript code

This is the JavaScript code, stored in the file “clienthint.js”:

var xmlhttp

function showHint(str)
{
if (str.length==0)
{
document.getElementById(“txtHint”).innerHTML=”";
return;
}
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
{
alert (“Your browser does not support XMLHTTP!”);
return;
}
var url=”gethint.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;
}

The showHint() function

The showHint() function above is executed every time a character is entered in the “txt1″ input field.

If there is input in the input field (str.length > 0), the showHint() function executes the following:

  • Defines the URL (filename) to send to the server
  • Adds a parameter (q) to the URL with the content of the input field
  • Adds a random number to prevent the server from using a cached file
  • Creates an XMLHTTP object, and tells the object to execute a function called stateChanged when a change is triggered
  • Opens the XMLHTTP object with the given URL
  • Sends an HTTP request to the server

If the input field is empty, the function simply clears the content of the txtHint placeholder.

The GetXmlHttpObject() function

The showHint() function above calls a function named GetXmlHttpObject().

The purpose of the GetXmlHttpObject() function is to solve the problem of creating different XMLHTTP objects for different browsers.

The stateChanged() function

The stateChanged() function executes every time the state of the XMLHTTP object changes.

When the state changes to 4 (“complete”), the content of the txtHint placeholder is filled with the response text.

Example explained – The PHP page

The code in the “gethint.php” checks an array of names and returns the corresponding names to the client:

<?php
// Fill up array with names
$a[]=”Anna”;
$a[]=”Brittany”;
$a[]=”Cinderella”;
$a[]=”Diana”;
$a[]=”Eva”;
$a[]=”Fiona”;
$a[]=”Gunda”;
$a[]=”Hege”;
$a[]=”Inga”;
$a[]=”Johanna”;
$a[]=”Kitty”;
$a[]=”Linda”;
$a[]=”Nina”;
$a[]=”Ophelia”;
$a[]=”Petunia”;
$a[]=”Amanda”;
$a[]=”Raquel”;
$a[]=”Cindy”;
$a[]=”Doris”;
$a[]=”Eve”;
$a[]=”Evita”;
$a[]=”Sunniva”;
$a[]=”Tove”;
$a[]=”Unni”;
$a[]=”Violet”;
$a[]=”Liza”;
$a[]=”Elizabeth”;
$a[]=”Ellen”;
$a[]=”Wenche”;
$a[]=”Vicky”;

//get the q parameter from URL
$q=$_GET["q"];

//lookup all hints from array if length of q>0
if (strlen($q) > 0)
{
$hint=”";
for($i=0; $i<count($a); $i++)
{
if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
{
if ($hint==”")
{
$hint=$a[$i];
}
else
{
$hint=$hint.” , “.$a[$i];
}
}
}
}

// Set output to “no suggestion” if no hint were found
// or to the correct values
if ($hint == “”)
{
$response=”no suggestion”;
}
else
{
$response=$hint;
}

//output the response
echo $response;
?>

If there is any text sent from the JavaScript (strlen($q) > 0), the following happens:

  1. Find a name matching the characters sent from the JavaScript
  2. If no match were found, set the response string to “no suggestion”
  3. If one or more matching names were found, set the response string to all these names
  4. The response is sent to the “txtHint” placeholder

Respond to this post