AJAX and Database
When using AJAX to request data from the server, the data source can
be a plain text file, or a database. For using AJAX source codes, it does
not make much difference. Let's see how to use AJAX to request data from
a database.
Create a page named "login.html":
<html>
<body>
<script language="javascript" type="text/javascript">
<!--
function requestHttp(url,posTag){//posTag for where to show the message
var httpRequest;
if(window.XMLHttpRequest){// Mozilla, Safari, ...
httpRequest = new XMLHttpRequest();
if(httpRequest.overrideMimeType){
httpRequest.overrideMimeType('text/xml');
}
}else if(window.ActiveXObject){ // IE
try{
httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
}catch (e){
try{
httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}catch (e){}
}
}
getFile(httpRequest,url,posTag);
}
function getFile(httpRequest,url,posTag){
if(!httpRequest){
alert('Error - Cannot create an XMLHTTP instance');
return false;
}
httpRequest.onreadystatechange = function(){
showContents(httpRequest,posTag);//function display contents
}
//httpRequest.open('GET', url, true);
//httpRequest.send('');
//send data to server
var email = document.getElementById('email').value;
var pass = document.getElementById('pass').value;
var qst = "email=" + email + "&pass=" + pass;
//-----post------
httpRequest.open("POST", url, true);
httpRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
httpRequest.setRequestHeader("Content-length", qst.length);
httpRequest.setRequestHeader("Connection", "close");
httpRequest.send(qst);
//-----post-----
}
function showContents(httpRequest,posTag){
if(httpRequest.readyState == 4){
if(httpRequest.status == 200){
//alert(httpRequest.responseText);
document.all(posTag).innerHTML=httpRequest.responseText;
}else{
alert('Error');
}
}
}
//-->
</script>
<form>
ID (Email): <input type='text' id='email' /><br />
Password: <input type='password' id='pass' /><br />
<input type="button" onclick="requestHttp('customers.php','message')"
value="Show" />
</form>
<div id="message"></div>
</body>
</html>
As you can see, this login page is slightly different from a regular
login page. We insert AJAX source codes into the page. The submit button
is also not a regular one, we use "onclick" handler to trigger
an AJAX function.
The next page is "customers.php". When the user clicks the
button and submits the request with the login info - email and password,
"customers.php" receives the request, and searches into the
database table "customers". If the record in the database matches
the submitted login info, then it sends the information in the database
back to the user.
Open database connection:
<?php
$dbhost="[your datbase host name]";
$dbuser="[your datbase username]";
$dbpass="[your datbase password]";
$dbname="[your datbase name]";
$dbh=mysql_connect ($dbhost, $dbuser, $dbpass) or die ('I cannot connect
to the database because: ' . mysql_error());
mysql_select_db ($dbname) or die ("Cannot connect to the database");
What method being used:
if(count($_POST) > 0){//if using post method
$email = $_POST['email'];
$pass = $_POST['pass'];
}else{//else if using get method
$email = $_GET['email'];
$pass = $_GET['pass'];
}
$email = mysql_real_escape_string($email);
$pass = mysql_real_escape_string($pass);
Select information if the login matches the record:
//select data from table "customers"
$sql = "SELECT * FROM customers WHERE email = '$email' and password='$pass'";
$qry = mysql_query($sql) or die(mysql_error());
Print the information into a HTML table:
$str = "<table border=1>";
$str .= "<tr>";
$str .= "<th>Name</th>";
$str .= "<th>Email</th>";
$str .= "<th>State</th>";
$str .= "</tr>";
while($row = mysql_fetch_array($qry)){
$str .= "<tr>";
$str .= "<td>$row[FirstName] $row[LastName]</td>";
$str .= "<td>$row[Email]</td>";
$str .= "<td>$row[State]</td>";
$str .= "</tr>";
}
$str .= "</table>";
echo $str;
?>
Finally, the HTML table above will be sent back to the login.html and
be displayed inside the tags:
<div id="message">[contents from customers.php will
be displayed here]</div>
That's it. Try it now.
|
Earn your 
Go to