PHP - SPLessons

PHP AJAX

Chapter 41

SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

PHP AJAX

PHP AJAX

shape Description

AJAX stands for Asynchronous JavaScript and XML. PHP AJAX is a technique which brings down the communication between the client and server by updating only web page instead of updating the entire page. These asynchronous interactions are defined by JavaScript.

Why AJAX?

Using PHP AJAX, following operations can be done.

  • Rich interactive web applications can be developed using PHP Ajax.
  • Validation of a form is done without submitting it with the help of auto completion.
  • AJAX decides the values of a dropdown box based on the values of another dropdown box.

shape Example

Step-1 : Initially create a database table with the following commands.

CREATE TABLE `ajax_example` (
   `name` varchar(50) NOT NULL,
   `age` int(11) NOT NULL,
   `sex` varchar(1) NOT NULL,
   `wpm` int(11) NOT NULL,
   PRIMARY KEY  (`name`)
) 

Step-2 : Now insert the below given data into the above table using SQL statements.

INSERT INTO `ajax_example` VALUES ('Jerry', 120, 'm', 20);
INSERT INTO `ajax_example` VALUES ('Regis', 75, 'm', 44);
INSERT INTO `ajax_example` VALUES ('Frank', 45, 'm', 87);
INSERT INTO `ajax_example` VALUES ('Jill', 22, 'f', 72);
INSERT INTO `ajax_example` VALUES ('Tracy', 27, 'f', 0);
INSERT INTO `ajax_example` VALUES ('Julie', 35, 'f', 90);

Step-3 : Create client side HTML page with the name “ajax.html”

<html>
   <body>
      
      <script language = "javascript" type = "text/javascript">
         <!--
            //Browser Support Code
            function ajaxFunction(){
               var ajaxRequest;  // The variable that makes Ajax possible!
               
               try {
                  // Opera 8.0+, Firefox, Safari
                  ajaxRequest = new XMLHttpRequest();
               }catch (e) {
                  // Internet Explorer Browsers
                  try {
                     ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
                  }catch (e) {
                     try{
                        ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
                     }catch (e){
                        // Something went wrong
                        alert("Your browser broke!");
                        return false;
                     }
                  }
               }
               
               // Create a function that will receive data 
               // sent from the server and will update
               // div section in the same page.
					
               ajaxRequest.onreadystatechange = function(){
                  if(ajaxRequest.readyState == 4){
                     var ajaxDisplay = document.getElementById('ajaxDiv');
                     ajaxDisplay.innerHTML = ajaxRequest.responseText;
                  }
               }
               
               // Now get the value from user and pass it to
               // server script.
					
               var age = document.getElementById('age').value;
               var wpm = document.getElementById('wpm').value;
               var sex = document.getElementById('sex').value;
               var queryString = "?age=" + age ;
            
               queryString +=  "&wpm=" + wpm + "&sex=" + sex;
               ajaxRequest.open("GET", "ajax-example.php" + queryString, true);
               ajaxRequest.send(null); 
            }
         //-->
      </script>
		
      <form name = 'myForm'>
         Max Age: <input type = 'text' id = 'age' /> <br />
         Max WPM: <input type = 'text' id = 'wpm' />
         <br />
         
         Sex: <select id = 'sex'>
            <option value = "m">m</option>
            <option value = "f">f</option>
         </select>
			
         <input type = 'button' onclick = 'ajaxFunction()' value = 'Query MySQL'/>
			
      </form>
      
      <div id = 'ajaxDiv'>Your result will display here</div>
   </body>
</html>

Step-4 : Create server side HTML page with the name “ajax-example.php”.

<?php
   
   $dbhost = "localhost";
   $dbuser = "dbusername";
   $dbpass = "dbpassword";
   $dbname = "dbname";
   
   //Connect to MySQL Server
   mysql_connect($dbhost, $dbuser, $dbpass);
   
   //Select Database
   mysql_select_db($dbname) or die(mysql_error());
   
   // Retrieve data from Query String
   $age = $_GET['age'];
   $sex = $_GET['sex'];
   $wpm = $_GET['wpm'];
   
   // Escape User Input to help prevent SQL Injection
   $age = mysql_real_escape_string($age);
   $sex = mysql_real_escape_string($sex);
   $wpm = mysql_real_escape_string($wpm);
   
   //build query
   $query = "SELECT * FROM ajax_example WHERE sex = '$sex'";
   
   if(is_numeric($age))
   $query .= " AND age <= $age";
   
   if(is_numeric($wpm))
   $query .= " AND wpm <= $wpm";
   
   //Execute query
   $qry_result = mysql_query($query) or die(mysql_error());
   
   //Build Result String
   $display_string = "<table>";
   $display_string .= "<tr>";
   $display_string .= "<th>Name</th>";
   $display_string .= "<th>Age</th>";
   $display_string .= "<th>Sex</th>";
   $display_string .= "<th>WPM</th>";
   $display_string .= "</tr>";
   
   // Insert a new row in the table for each person returned
   while($row = mysql_fetch_array($qry_result)) {
      $display_string .= "<tr>";
      $display_string .= "<td>$row[name]</td>";
      $display_string .= "<td>$row[age]</td>";
      $display_string .= "<td>$row[sex]</td>";
      $display_string .= "<td>$row[wpm]</td>";
      $display_string .= "</tr>";
   }
   echo "Query: " . $query . "<br />";
   
   $display_string .= "</table>";
   echo $display_string;
?>

After proper execution of above code, the output will be as follows.

Summary

shape Key Points

  • AJAX stands for Asynchronous JavaScript and XML.
  • PHP AJAX creates rich interactive applications.