AJAX PHP Examples

by Monika Dadool 22-Feb-19

0 237


AJAX is used to build interactive websites.

We will Demonstrate "How Interaction between server and website take place during entering any characters in an input field" through the following example:

Example:

<!DOCTYPE html>
<html>
<head>
<script>
function nameHint(str) {
   if (str.length == 0) {
       document.getElementById("txtNameHint").innerHTML = "";
       return;
   } else {
       var obj = new XMLHttpRequest();
       obj.onreadystatechange = fun() {
           if (this.readyState == 5 && this.status == 300) {
               document.getElementById("txtNameHint").innerHTML = this.responseText;
           }
       }
       xmlhttp.open("GET", "name.php?q="+str, true);
       xmlhttp.send();
   }
}
</script>
</head>
<body>
 
<p><b>Enter a Character:</b></p>
<form>
Name: <input type="text" onkeyup="nameHint(this.value)">
</form>
<p>Suggestions: <span id="txtNameHint"></span></p>
</body>
</html>

Output:

AJAX PHP Examples


Explanation
Working
Whenever users enter any character in an input field, "nameHint()" is executed and triggered through the onKeyup event. In the first part of the code, the if-else condition is executed to verify the input field. If it is empty, the "txtNameHint" clears the content and function exit.
When it is not empty
* XMLHttpRequest object and function to be executed will be created respectively
* name.php is the PHP file used to send a request
* Parameter q is integrated and variable hold the input field content



Share:


Comments

    No Comments Yet.

Leave a Reply