PHP Example - AJAX Suggest
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:
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:
- 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:
<?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:
- Find a name matching the characters sent from the JavaScript
- If no match were found, set the response string to "no suggestion"
- If one or more matching names were found, set the response string to all these names
- The response is sent to the "txtHint" placeholder
Stylus Studio® 2010 XML Enterprise Suite raises the bar for productivity in XML development tools.
Millions of XML developers and data integration specialists turn to Stylus Studio's comprehensive and intuitive
XML toolset to tackle today's advanced XML data transformation and aggregation challenges.
|
- XML Pipeline Editor, Debugger and Code Generator
- DataDirect XML Converters
- XQuery Mapper, Editor, Debugger, and Profiler
- XSLT Mapper, Editor, Debugger, Designer, and Profiler
- Java and C# for .Net Code Generation
- XML Schema Designer With Documentation Generator
- XML Editor With Full XPath Integration
Download a free trial now
|
| 
