AJAX 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:

First name: 

Suggestions:

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

Start typing a name in the input field below:

 

First name:

 

Suggestions:

 



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 file (gethint.php) on the server
    • 

  • Notice that q parameter is added to the url (gethint.php?q=”+str)
    • 

  • And the str variable holds the content of the input field
    • 



The PHP File – “gethint.php”


The PHP file checks an array of names, and returns the corresponding name(s) to the browser: