How to run PHP using Ajax (With Demo)

Last updated on April 20th, 2022 at 04:53 am

Here is a simple script on how to use Ajax to call a PHP web page and provide the results dynamically. We are using three files to complete this script

First one is an HTML file named Test.html
Second is a javascript file with the name clienthint.js
Third is a php file with the name Tutorialz.php

So let us start with the HTML page. It contains a simple HTML form and a link to a JavaScript.

Test.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>

Below is the javascript part which in turn calls XMLHTTP request from the page Test.html to the Tutorialz.php page.

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 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;
}

The AJAX Server Page -PHP

There is no such thing as an AJAX server. AJAX pages can be served by any internet server.

Code inside “tutorialz.php” page checks an array of names and returns the corresponding 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 localserver using the URL (http://localhost/Test.html)

Demo