AJAX and PHP

August 17, 2016 by Giryavva Ghodake

Filed under php

Last modified October 25, 2016

AJAX and PHP

AJAX php is used to create more interactive applications.

AJAX  PHP Example

The following example will demonstrate how a web page can communicate with a web server while a user type characters in an input field:

Example

Start typing a name in the input field below:

Top of Form

First name:

Bottom of Form

Suggestions: Johanna

Example Explained

In the example above, when a user types a character in the input field, a function called “showHint()” is executed.

The function is triggered by the onkeyup event.

Here is the HTML code:

Example

<html>
<head>
<script>
function showHint(str) {
if (str.length == 0) {
document.getElementById(“txtHint”).innerHTML = “”;
return;
} else {
var xmlhttp = new XMLHttpRequest();
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>Start typing a name in the input field below:</b></p>
<form>
First name: <input type=”text” onkeyup=”showHint(this.value)”>
</form>
<p>Suggestions: <span id=”txtHint”></span></p>
</body>
</html>

Code explanation:

First, check if the input field is empty (str.length == 0). If it is, clear the content of the txtHint 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 ajax file (gethint.php) on the server
  • Notice that q parameter is added gethint.php?q=”+str
  • The str variable holds the content of the input field

Leave a Comment