Thursday, October 8, 2020

How to use AJAX in PHP

 |  No comments


Hello dear readers! welcome back to another section of my tutorial on PHP. In this section of my PHP tutorial, we will be studying about PHP & AJAX.

What is AJAX?

AJAX simply means Asynchronous JavaScript and XML. It provides a new way for creating better, faster, & interactive web applications with the assistance of XML, Html, Css & JavaScript.

Conventional web applications transmit information to and from the server by using synchronous request. This simply means you fill out a form, hit submit, and then get directed to a new page with new information from the server.

With AJAX when submit button is pressed, JavaScript will make a request to the server, interpret the results and finally it will update the current screen. In purest sense, the user would never know that anything was even transmitted to the server.


PHP and AJAX Example

To clearly explain how easy it is to access information in a database using AJAX and PHP, we will build MySQL queries on the fly and then display the results on "ajax.html". But before we proceed, lets do a ground work. Create a table using the below command.

Note - we are assuming that you have sufficient privilege to carry out below MySQL operations. 

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`)
)

Now dump the following below data into this table by using the following 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);

RECOMMENDED POST: A Guide to PHP Operators

Client Side HTML File

Now let us have our client side Html file which is ajax.html and it will have the following code -

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

Note - The procedure of passing variables in the Query is as laid down by HTTP standards. 

URL?variable1=value1;&variable2=value2;

Output

Now the above code will display a screen as shown below -

Note - This is a dummy screen and would not work.

Max Age:  

Max WPM: 
Sex:  
Your result will display here

RECOMMENDED: PHP Global Variables

Server Side PHP File

So now your client side script is ready. Now we have to write our server side script which will get age, wpm and then sex from the database and will send it back to the client. Put the following code into an "ajax-example.php" file.

<?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;
?>

Output

Now try entering a valid value in the "Max Age" or any other box and click on Query MySQL button.

Max Age:  

Max WPM: 
Sex:  
Your result will display here


Alright guys! This is where we are rounding up for this tutorial post. In my next tutorial guide, we will be discussing about how to use PHP and XML.

Feel free to ask your questions where necessary and i will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.

Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.

Thanks for reading and bye for now.
Share:

0 comments:

Post a Comment

Hello dear readers! Please kindly try your best to make sure your comments comply with our comment policy guidelines. You can visit our comment policy page to view these guidelines which are clearly stated. Thank you.