Ajax Tutorial - MySQL

Ajax Tutorial - MySQL
1 of 3
http://www.tizag.com/ajaxTutorial/ajax-mysql-database.php
Home
Web Reference
HTML Reference
CSS Reference
CSS Examples
PHP Examples
Web Tutorials
Beginner Tutorial
HTML Tutorial
CSS Tutorial
Scripting
Javascript Tutorial
PHP Tutorial
Perl Tutorial
Ajax Tutorial
ASP Tutorial
VBScript Tutorial
ajax - mysql database

We already know how to run an external PHP script with AJAX, so let's take it to
the next level and pull some data down from a MySQL database. Our "order.html"
file and PHP script will have to be updated and we also need to make a new
database.
Looking for best charts?
Ajax Tutorial
Ajax
Ajax
Ajax
Ajax
Ajax
Tutorial
Form
Brow ser Support
XMLHttpRequest
PHP
Advanced Ajax
Ajax - MySQL
Ajax - Javascript
Get Help!
Ajax Forum
New - Tizag.com Forums!
Recent Forum Topics:
www.AnyChart.com
SQL Tutorial
MySQL Tutorial
XML Tutorial
Webhost Tutorial
Flash Tutorial
SEO Tutorial
Link to Tizag
AnyChart is charting solution from industry leader. Free trial.
Databases
Miscellaneous
Help Tizag Grow
Advertise on Tizag.com
Advertise Here
create the mysql table

To clearly illustrate how easy it is to access information from a database using
Ajax, we are going to build MySQL queries on the fly and display the results on
"order.html".
Create a new database or use an existing one and then import the table
ajax_example.sql to that database. This sql file will create the table ajax_example and
insert all the data rows. The table has four columns:
ae_name - The name of the person
ae_age - Person's age
ae_sex - The gender of the person
ae_wpm - The words per minute that person can type
Contact Us
update order.html
We want to be able to build queries from our HTML file, so there are a few form
elements that will need to be added. The three inputs we are going to implement
are:
Maximum Age (Text Input) - Let the user select the maximum age to be returned.
Maximum WPM (Text Input) - Let the user select the maximum wpm to returned.
Gender (Select Input) - Let the user select the gender of a valid person.
order.html HTML/Javascript 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!");
More Tutorials!
Microsoft Office Tutorials
Artist Tutorials
22.02.2012 1:04 PM
2 of 3
return false;
}
}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
document.myForm.time.value = ajaxRequest.responseText;
}
}
var age = document.getElementById('age').value;
var wpm = document.getElementById('wpm').value;
var sex = document.getElementById('sex').value;
var queryString = "?age=" + age + "&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>m</option>
<option>f</option>
</select>
<input type='button' onclick='ajaxFunction()' value='Query MySQL' />
</form>
</body>
</html>
If the new Javascript code is foreign to you, be sure to check out our lesson on
Javascript's getElementById Function .
With our new Javascript code

var queryString = "?age=" + age + "&wpm=" + wpm + "&sex=" + sex;
we have built a query string to pass along the information from our HTML form to
our PHP script.
ajax - passing variables via query string

A query string is a way of passing information by appending data onto the URL.
You may have often seen it on the web, it's all the information that appears after a
question mark "?". When you submit a form using GET it builds a query string, all
we're doing here is manually building our own.
http://www.tizag.com/somescript.php?variable1=value1&variable2=value2
The left side of the equals operator is the variable name and the right side is the
variable's value. Also, each variable is separated with an ampersand &.
For example, if we wanted to send the variables age, sex, and wpm with values
20, f, 40 to our PHP script ajax-example.php then our URL would look like:
http://www.tizag.com/ajax-example.php?age=20&sex=f&wpm=40
Now we need to build a new PHP script to take these variables and run a
MySQL query for us.
ajax - create ajax-example.php script

We already changed the destination URL in our ajaxRequest.open method, now
we need to make a script to grab those variables from the query string and execute
a MySQL Query. We're also going to use a special function
mysql_real_escape_string to prevent any harmful user input from doing something
they aren't supposed to (we're going to take steps against SQL Injection).
ajax-example.php Code:
<?php
22.02.2012 1:04 PM
3 of 3
$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 ae_sex = '$sex'";
if(is_numeric($age))
$query .= " AND ae_age <= $age";
if(is_numeric($wpm))
$query .= " AND ae_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[ae_name]</td>";
$display_string .= "<td>$row[ae_age]</td>";
$display_string .= "<td>$row[ae_sex]</td>";
$display_string .= "<td>$row[ae_wpm]</td>";
$display_string .= "</tr>";
}
echo "Query: " . $query . "<br />";
$display_string .= "</table>";
echo $display_string;
?>
the next step - updating order.html

We have completed our initial order.html and ajax-example.php setup, now we
just need our order.html page to update correctly when a query is returned. We'll be
using a couple advanced Javascript functions to update a segment of order.html
with the MySQL result display_string.
Ads by Google
DB PHP
Ajax Jquery
PHP Database
Go Back
Ajax Demo
Continue
found something wrong in this lesson?

Report a Bug or Comment on This Lesson - Your input is what keeps Tizag
improving with time!
2003-2008 Erack Network | Copyright | Privacy Policy | Advertising Information

Site design by Seattle Web Design
22.02.2012 1:04 PM

Ajax Tutorial - MySQL

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Ajax Tutorial - MySQL

Uploaded by

Copyright:

Available Formats

Ajax Tutorial - MySQL

ajax - mysql database

Looking for best charts?

New - Tizag.com Forums!

Recent Forum Topics:

AnyChart is charting solution from industry leader. Free trial.

Help Tizag Grow

create the mysql table

order.html HTML/Javascript Code:

Ajax Tutorial - MySQL

With our new Javascript code

ajax - passing variables via query string

ajax - create ajax-example.php script

Ajax Tutorial - MySQL

the next step - updating order.html

found something wrong in this lesson?

improving with time!

2003-2008 Erack Network | Copyright | Privacy Policy | Advertising Information

You might also like