AJAX suggest PHP

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

First Name:

Suggestions:

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:

• Calls the GetXmlHttpObject() function to create an XMLHTTP object
• 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
• Each time the readyState property changes, the stateChanged() function will be executed
• 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:

0
if (strlen($q) > 0)
{
$hint="";
for($i=0; $i

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