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