Last updated on November 7th, 2024 at 07:45 am
This document outlines a straightforward script for utilizing Ajax to invoke a PHP web page and dynamically present the results. The implementation involves three distinct files:
- The first file is an HTML document titled check.html.
- The second file is a JavaScript file named clienthint.js.
- The third file is a PHP script referred to as Tutorialz.php.
So let us start with the HTML page. It contains a simple HTML form and a link to a JavaScript.
check.html code looks like this
<script type='text/javascript' src='clienthint.js'></script>
<input type='text' id='txt1' onkeyup='showHint(this.value)'/>
<p>Suggestions: <span id='txtHint'></span></p>
The following section pertains to the JavaScript code that initiates an XMLHTTP request from the check.html page to call the PHP file, Tutorialz.php . Lets store it 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 AJAX!');
return;
}
var url='tutorialz.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()
{
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;
}
There is no such thing as an AJAX server. AJAX pages can be served by any internet server.
The PHP code located within the “tutorialz.php” page examines an array of names and subsequently returns the relevant names to the client.
Note: Code below is tutorialz.php
<?php
// Fill up array with names
$a[]='Google';
$a[]='Yahoo';
$a[]='Hotmail';
$a[]='Java';
$a[]='PHP';
$a[]='Asp';
$a[]='Ajax';
$a[]='Javascript';
$a[]='Ruby';
$a[]='Ecllipse';
$a[]='Dreamweaver';
$a[]='Flash';
$a[]='Photoshop';
$a[]='Fireworks';
$a[]='Flex';
$a[]='hass';
$a[]='marcelo';
$a[]='luciano';
$a[]='thiago';
$a[]='pallero';
$a[]='mozin';
$a[]='angush';
$a[]='gary';
$a[]='mike';
$a[]='perotti';
$a[]='michael';
$a[]='angelo';
$a[]='remoiv';
$a[]='asne';
$a[]='jack';
//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 <= strlen($q);$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;
?>
Save all these files in the same location and call the script from your local server using the URL (http://localhost/check.html)
nice website keep going….
hmm wooww
yup..
good one..
A good website with good inputs….hats off
a coool……..site
HMM
best of its kind
a nice one..
fine
not bad..
a nice one
cool site