Introduction

In this AJAX tutorial we will learn how to make a PHP AJAX call to display data to the user. We will create form that where users will input their name and while they are typing, a list of suggested names will appear and be able to be selected. We are essentially trying to replicate a situation where the user may require the computer’s input to make a recommendation.

The HTML Markup and Javascript

In order to make the AJAX call work, we must tell the computer when to execute this action. What better way to do this then by Javascript. With Javascript, we can tell the computer that “when the user releases a keyboard key while typing in the input field, execute the Javascript and make the AJAX call”. Let’s set up our HTML.

There are a few lines of conditional statements that will guide the browser in making the appropriate decision in executing the AJAX call.

  • First, clear the textHint ID area
  • Create an XMLHttpRequest object
  • Create the function to be executed when the server response is ready (.onreadystatechange line)
  • Send the request off to a file on the server
  • Notice that a parameter (n) is added to the URL (with the content of the input field which is +str)

PHP

As you may have noticed from the previous step, there is an http request to a file called namehints.php. The AJAX call has been created when the user releases the keyboard key and we must now create and place a document named “namehint.php” in the proper folder for the AJAX to refer to. Create the document and place the following code inside the document.

Our namehint.php file

There is definitely a lot of information here so lets go over what we are inputting.

  • The first section is a long array list which we’ve named $a with all the names that can be suggested. The longer the list, the more comprehensive of a recommendation you can make.
  • Next we get the ‘n’ parameter that is requested in the URL along with the $hint variable which we will give it a no value.
  • Create the function to be executed when the server response is ready (.onreadystatechange line)
  • Now starts our conditional, if $n is something other than blank, continue the with the PHP code
  • Inside this condition, that has variables: one to convert $n into lowercase strings and to get the string length of $n. After that we run a foreach loop changing our array $a into $name.
  • Inside this loop we determine to place a name depending on how long the string is and if it matches any of them as well as placing one hint or two hints.
  • Our line is a conditional that states ” if $hint has no value, output ‘no suggestion’, if not output $hint (a value that is stored from the foreach loop)”

Let’s break it down into a much simpler explanation: Create a Javascript that makes an AJAX call when the user types in the textarea. The AJAX will will request and run a PHP code from our PHP file. In this file we created a list of recommended names. Our PHP code will loop through these names and output the names based off of what strings were submitted.

Wrapping It Up

PHP is a very flexible language and can help you communicate with the server and execute many different kinds of functions. Besides making an AJAX call to a file, you can also call to a database or XML file to request valuable data and display it to your users as well. Take your PHP skills further and try practicing with these new ideas.