Ajax - SPLessons
SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

AJAX With PHP

AJAX With PHP

shape Description

PHP is widely used server side scripting language and also PHP is an open source scripting language. PHP is mainly focused on web development to interact with HTML elements using dynamic content from the database or other web services.The present chapter PHP Tutorials gives the basic idea of PHP. PHP is a language that is used for web development by web developers. Originally PHP was known as Personal Home Page Tools. Later on, after PHP version 3, it is being known as PHP Hypertext Preprocessor. PHP is used on millions of servers worldwide. Nowadays, PHP is a very powerful language, which is widely used for CMS and it is being used in many frameworks. For example, Zend framework, Cake framework, etc. PHP plays the main role in E-commerce Sites and in the social networking sites also.

PHP Example

shape Description

Basically PHP file contains normal HTML elements and PHP scripts.PHP script can be kept anywhere in the document, but the file has to be saved with .php extension, otherwise PHP script will be considered as normal HTML text. The following is the example code for the PHP. [html]<!DOCTYPE html> <html> <body> <h1>Hello World ! Welcome to Splessons</h1> <?php echo " Hello World, Welcome to Splessons"; ?> </body> </html>[/html] Every PHP statement ends with a semicolon ; .All these statements can be enclosed within block that start and end with curly braces {}. The following is the synatx of the PHP code. Output: Now compile the code result will be as follows.

AJAX Example With PHP

shape Description

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. By using PHP the following operation will be done. Initially create a database table with the following commands. [c]CREATE TABLE `ajax_example` ( `name` varchar(50) NOT NULL, `age` int(11) NOT NULL, `gender` varchar(1) NOT NULL, `wpm` int(11) NOT NULL, PRIMARY KEY (`name`) ) [/c] A primary key, additionally called a primary keyword, it is a key in a database that is one of a kind for every record. It is a one of a kind identifier, Primary keys regularly show up as sections in database tables. Now insert the below given data into the above table using SQL statements. [c]INSERT INTO `ajax_example` VALUES ('Jerry', 120, 'Male', 20); INSERT INTO `ajax_example` VALUES ('Regis', 75, 'Male', 44); INSERT INTO `ajax_example` VALUES ('Frank', 45, 'Female', 87); INSERT INTO `ajax_example` VALUES ('Jill', 22, 'Female', 72); INSERT INTO `ajax_example` VALUES ('Tracy', 27, 'Female', 0); INSERT INTO `ajax_example` VALUES ('Julie', 35, 'Female', 90);[/c] Create client side HTML page with the name ajax.html [html] <html> <body bgcolor="skyblue"> <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; } } </script> <form name='myForm'> Max Age: <input type='text' id='age' /> <br /> Max WPM: <input type='text' id='wpm' /> <br /> Gender: <select id='Gender'> <option value="Male">Male</option> <option value="Female">Female</option> </select> <input type='button' onclick='ajaxFunction()' value='Query MySQL' /> </form> <div id='ajaxDiv'>Your result will display here</div> </body> </html> [/html] The onreadystatechange function will be put away and will be called naturally every time readyState property changes. Componens not in the record are not found by using getElementById(). When building an element and giving it an ID, user have to insert the element into the document tree by using Node.insertBefore(). Create server side HTML page with the name ajax-example.php. [html] <?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']; $gender = $_GET['sex']; $wpm = $_GET['wpm']; // Escape User Input to help prevent SQL Injection $age = mysql_real_escape_string($age); $gender = mysql_real_escape_string($gender); $wpm = mysql_real_escape_string($wpm); //build query $query = "SELECT * FROM ajax_example WHERE gender = '$gender'"; 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>Gender</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[gender]</td>"; $display_string .= "<td>$row[wpm]</td>"; $display_string .= "</tr>"; } echo "Query: " . $query . "<br />"; $display_string .= "</table>"; echo $display_string; ?> [/html] Mostly echo is used to print the output. There is no much more difference in between these two elements. Both are similar but the difference is very small i.e. print will return a value of 1 and the echo won’t return any value. Echo can take multiple arguments, but print can take only one argument at a time. Echo process the arguments very faster than print. Similarly like echo statement, print statement can be used with or without parentheses. Print can take only one parameter. Output: Now compile the code result will be as follows.

Summary

shape Key Points

  • AJAX decides the values of a dropdown box based on the values of another dropdown box.
  • Echo can take multiple arguments, but print can take only one argument at a time.
  • Echo can be used to output the text element with or without parentheses.