php
AJAX and PHP

Create an PHP Ajax application

We will create a simple example that allows users to search for popular PHP frameworks.
Our application will have a text box that users will type in the names of the frameworks.
Will use AJAX to search for a match then display the frameworks's complete name just below the search form.

The following example will demonstrate how a web page can communicate with a web server while a user type characters in an input field :
Sample Application
simple-ajax.php
<!DOCTYPE html>
<html>
<head>
	<title>PHP - AJAX and PHP</title>
</head>
<body>
<style type="text/css">
	.ajax_php_font{ 
		color:#F60; 
		font-weight:bold; 
		font-style:italic; 
		font-size:16px;
		}
</style>
<script type="text/javascript">
function showHint(str) {
    if (str.length == 0) { 
        document.getElementById("tut_name").innerHTML = "";
        return;
    } else {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("tut_name").innerHTML = this.responseText;
            }
        };
        xmlhttp.open("GET", "get_data.php?q=" + str, true);
        xmlhttp.send();
    }
}
</script>
</head>
<body>

<h4>Search  your tutorial in the input field below :</h4>
<form> 
Tutorial Name: <input type="text" onkeyup="showHint(this.value)">
</form>

<p>Your tutorial name is : <span id="tut_name" class="ajax_php_font"></span></p>

</body>
</html>

First, check if the input field is empty (str.length == 0). If it is, clear the content of the tut_name placeholder and exit the function.

However, if the input field is not empty, do the following :

  • Create an XMLHttpRequest object
  • Create the function to be executed when the server response is ready
  • Send the request off to a PHP file (get_datat.php) on the server
  • Notice that q parameter is added to the url (get_datat.php?q="+str)
  • And the str variable holds the content of the input field
get_data.php
<?php
// Array with tutorials
$a[] = "C Language";
$a[] = "C++";
$a[] = "Bootstrap";
$a[] = "HTML5";
$a[] = "HTML";
$a[] = "CSS";
$a[] = "CSS3";
$a[] = "JAVA";
$a[] = "JavaScript";
$a[] = "jQuery";
$a[] = "PHP";
$a[] = "MySQL";
$a[] = "SQL";
$a[] = "Adv Java";
$a[] = "Python";
$a[] = "AngularJS";
$a[] = "Photoshop";
$a[] = "C#";
$a[] = "ASP.NET";
$a[] = "SAP";
$a[] = "ORACLE";
$a[] = "Wordpress";
$a[] = "Android";
$a[] = "iOS";
$a[] = "SEO";
$a[] = "Illustrator";
$a[] = "Flash";
$a[] = "Action Script";

// get the q parameter from URL
$q = $_REQUEST["q"];

$hint = "";

// lookup all hints from array if $q is different from "" 
if ($q !== "") {
    $q = strtolower($q);
    $len=strlen($q);
    foreach($a as $name) {
        if (stristr($q, substr($name, 0, $len))) {
            if ($hint === "") {
                $hint = $name;
            } else {
                $hint .= ", $name";
            }
        }
    }
}
// Output correct values 
echo $hint === "" ? "no suggestion" : $hint;
?>

We see you’re using an ad blocker.

Our website is made possible by displaying ads to our visitors.

Please help us continue to provide you with free. So please disabling your ad blocker.