Introduction to AJAX

Code that receives the username and sends the username to php script using AJAX

 
      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Ajax Tutorial</title>
      </head>
      <body>
          <form action="">
            <h2>Checking Username from a file on the Server</h2>
          <label for="username">Enter the username</label>
          <input type="text" name="username" id="username" required  onkeyup="checkuser(this.value)">
          <label for="message" id="msg"></label>
          <hr>
          <h2>Checking username from Database</h2>
          <label for="usernamedb">Enter the username</label>
          <input type="text" name="usernamedb" id="usernamedb" required onkeyup="checkuserdb(this.value)">
          <label for="messagedb" id="msgdb"></label>
          </form>
      </body>
      <script>
      
      //function to check the username against an array of elements stored using PHP
      function checkuser(str) {
        var xhttp;
        if (str == "") {
          document.getElementById("msg").innerHTML = "";
          return;
        }
        xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
          if (this.readyState == 4 && this.status == 200) {
          document.getElementById("msg").innerHTML = this.responseText;
          }
        };
        xhttp.open("POST", "checkuserarray.php", true);
        xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xhttp.send("username="+str); 
      }
      
      //function to check the username against a database using PHP
      function checkuserdb(str) {
        var xhttp;
        if (str == "") {
          document.getElementById("msg").innerHTML = "";
          return;
        }
        xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
          if (this.readyState == 4 && this.status == 200) {
          document.getElementById("msgdb").innerHTML = this.responseText;
          }
        };
        xhttp.open("POST", "checkusername.php", true);
        xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xhttp.send("username="+str); 
      }
      </script>
      </html>
      
      //checkuserarray.php - This php scripts receives the username entered by the user
      //and checks if the name is present in an array of names . Echos the result back 
      <?php
      
      $username = $_POST['username'];
      $result="";
      $users = array("Satish","Ram","Jeff","Mohan","Mathew");
      foreach($users as $value)
      if (stristr($username,substr($value,0,strlen($username))))
      {
            $result.= " $value ";   
      }
      
      if($result !=null)
      {
          echo $result;
      }
      else
      {
          echo "0 results";
      }
      ?>
      
      //checkuserdb.php - This php scripts receives the username entered by the user
      //and checks if the name is present inside a table on MySQL Database . Echos the result back 
      <?php
      function OpenCon()
      {
      $dbhost = "localhost";
      $dbuser = "root";
      $dbpass = "";
      $db = "satish";
      $conn = new mysqli($dbhost, $dbuser,"",$db) or die("Connect failed: %s\n". $conn -> error);
      return $conn;
      }
      
      function CloseCon($conn)
      {
      $conn -> close();
      }
      
      $conn = OpenCon();
      $username = $_POST['username'];
      $sql = "SELECT name FROM employee where name like'$username%'";
      $result = $conn->query($sql);
      
      if ($result->num_rows > 0) 
      {
      // output data of each row
      while($row = $result->fetch_assoc()) 
      {
      echo  "<br>" ."Name: " . $row["name"];
      }
      } else 
      {
      echo "0 results";
      }
      
      CloseCon($conn);
      ?>
Introduction to AJAX

Code that receives the username and sends the username to php script using AJAX

Output
