DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

PHP - AJAX and PHP


AJAX is used to create more interactive applications.


AJAX PHP example

The following example demonstrates how a web page can communicate with a web server when a user types characters in an input box:

Example

Try entering a name in the input box, such as Anna:

Name:

Return value:




Example explanation-HTML page

When the user types a character into the input box above, the "showHint ()" function is executed. This function is triggered by the "onkeyup" event:

<html>
<head>
<script>
function showHint(str)
{
    if (str.length==0)
    { 
        document.getElementById("txtHint").innerHTML="";
        return;
    }
    if (window.XMLHttpRequest)
    {
        //IE7+, Firefox, Chrome, Opera, Safari Browser executed code
        xmlhttp=new XMLHttpRequest();
    }
    else
    {    
        //IE6, IE5 Browser executed code
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET","gethint.php?q="+str,true);
    xmlhttp.send();
}
</script>
</head>
<body>

<p><b>Enter a name in the input box:</b></p>
<form> 
Name: <input type="text" onkeyup="showHint(this.value)">
</form>
<p>return value: <span id="txtHint"></span></p>

</body>
</html>

Source code explanation:

If the input box is empty (str.length == 0), the function clears the contents of the txtHint placeholder and exits the function.

If the input box is not empty, showHint () performs the following steps:

  • Creating an XMLHttpRequest object
  • Create a function to be executed when the server response is ready
  • Send a request to a file on the server
  • Please note the parameter (q) added to the end of the URL (including the content of the input box)

PHP file

The above server page called via JavaScript is a PHP file named "gethint.php".

The source code in "gethint.php" checks the array of names and returns the corresponding names to the browser:

<?php
//Fill names into an array
$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 the request URL
$q=$_GET["q"];

//Find if matched by value, ifq>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];
            }
        }
    }
}

//If there is no matching value set the output to "no suggestion" 
if ($hint == "")
{
    $response="no suggestion";
}
else
{
    $response=$hint;
}

//Output return value
echo $response;
?>

Explanation: If JavaScript sends any text (i.e. strlen ($ q) > 0),Will happen:

  1. Find names that match characters sent by JavaScript
  2. If no match is found, set the response string to "no suggestion"
  3. If one or more matching names are found, set the response string with all names
  4. Send response to "txtHint" placeholder