AJAX PHP Example

AJAX is used to create more interactive applications.

AJAX PHP Example

In the following example, we demonstrate how the web page communicates with the web server when the user types characters in the input field:

Example

Please enter letters A-Z in the input field below:

Name:

Search Suggestions:

Example Explanation

In the above example, when the user types characters in the input field, the function named "showHint()" is executed.

This function is triggered by the onkeyup event.

Below is the HTML code:

Example

<html>
<head>
<script>
function showHint(str) {
    if (str.length == 0) { 
        document.getElementById("txtHint").innerHTML = "";
        return;
    }
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("txtHint").innerHTML = this.responseText;
            }
        };
        xmlhttp.open("GET", "gethint.php?q=" + str, true);
        xmlhttp.send();
    }
}
</script>
</head>
<body>
<p><b>Please enter the name in the input field below:</b></p>
<form> 
Last name or first name:<input type="text" onkeyup="showHint(this.value)">
</form>
<p>Recommendation:<span id="txtHint"></span></p>
</body>
</html>

Try it yourself

Code Explanation:

First, check if the input field is empty (str.length == 0），if so, clear the content of the txtHint placeholder and exit the function.

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

  • Create an XMLHttpRequest object
  • Create a function to be executed when the server response is ready
  • Send a request to the PHP file (gethint.php) on the server
  • Please note to add the 'q' parameter to gethint.php
  • The variable 'str' stores the content of the input field

PHP file - "gethint.php"

This PHP file checks the name array and then returns the corresponding name to the browser:

<?php
// Name array
 $a[] = "Ava";
 $a[] = "Brielle";
 $a[] = "Caroline";
 $a[] = "Diana";
 $a[] = "Elise";
 $a[] = "Fiona";
 $a[] = "Grace";
 $a[] = "Hannah";
 $a[] = "Ileana";
 $a[] = "Jane";
 $a[] = "Kathryn";
 $a[] = "Laura";
 $a[] = "Millie";
 $a[] = "Nancy";
 $a[] = "Opal";
 $a[] = "Petty";
 $a[] = "Queenie";
 $a[] = "Rose";
 $a[] = "Shirley";
 $a[] = "Tiffany";
 $a[] = "Ursula";
 $a[] = "Victoria";
 $a[] = "Wendy";
 $a[] = "Xenia";
 $a[] = "Yvette";
 $a[] = "Zoe";
 $a[] = "Angell";
 $a[] = "Adele";
 $a[] = "Beatty";
 $a[] = "Carlton";
 $a[] = "Elisabeth";
 $a[] = "Violet";
// Get q parameter from URL
$q = $_REQUEST["q"];
$hint = "";
// Check all hints in the array, is $q the same as ""
if ($q !== "") {
    $q = strtolower($q);
    $len=strlen($q);
    foreach($a as $name) {
        if (stristr($q, substr($name, 0, $len))) {
            if ($hint === "") {
                $hint = $name;
            }
                $hint .= ", $name";
            }
         }
    }
}
// Output "no suggestion" if hint is not found or output the correct value
  echo $hint === "" ? "no suggestion" : $hint;
?>
c.html" -->