Using AJAX with PHP

AJAX stands for Asynchronous JavaScript and XML. AJAX is a technique for creating fast and dynamic web pages, it is used to updating parts of a web page, without reloading the whole page. 

AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page whereas classic web pages which do not use AJAX, must reload the entire page if the content should change.

Let’s have an example, how to use AJAX with PHP.

In this example I will show you, how a web page can communicate with a web server while a user type characters in a text field:

Using AJAX with PHP

When you type a character into text field then the suggestion value will be display in front of ‘Suggestion value’ para.

<!DOCTYPE html>
        <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
        <title>Using Ajax with PHP</title>
        <script type="text/javascript">
            function showHint(str) {
                if (str.length==0) {
                    document.getElementById("sugName").innerHTML= "";
                if (window.XMLHttpRequest) {
                xmlHttp.onreadystatechange=function () {
                    if (xmlHttp.readyState==2) {
                        document.getElementById("sugName").innerHTML= xmlHttp.responseText;
      "GET", "GetNameHint.php?txtVal="+str, true);
            <tr><td><p><b>Enter Employee Name : </b></p></td>
                <td><input type ="text" id="txtName" onkeyup="javascript: showHint(this.value);"size ="40"></input></td>
                <td> <b>Suggestion Value: </b></td>
                <td> <p> <span id ="sugName"></span></p></td>


When you type a character into text field, ‘GetNameHint.php’ script is invoked to communicate with server.

            // Insert names in array 'a'
            $name[] ="Arun";
            $name[] ="Jay";
            // getting textbox value from url
            $urlVal = $_GET["txtVal"];
            if (strlen($urlVal) > 0)
                // assign default value of hint
              for($i=0; $i<count($name); $i++)
                  // search hint in above array '$name'
                if (strtolower($urlVal)==strtolower(substr($name[$i],0,strlen($urlVal))))
                  if ($hint=="")
                      // set hint value at first time hint available
                      // concatenate hint with previous one
                    $hint=$hint." , ".$name[$i];
            // Set output to "no suggestion" if no hint were found
            // or to the correct values
            if ($hint == "")
                // message display when no hint is available
              $response="No suggestion available";
                // set response value if hint is already having some value
            //send output response to client browser
            echo $response;

Using AJAX with PHP

Highlighted value shows the suggestion value for typed character into text field.

  Modified On Sep-07-2019 12:12:40 AM

Leave Comment