Truy cập Database sử dụng AJAX
Chương này mình trình bày một ví dụ minh họa cách truy cập Database bởi sử dụng kỹ thuật AJAX. Trước khi thực hiện ví dụ, bạn cần tạo một bảng có tên là ajax_vietjack trong Database (MySQL chẳng hạn) với các trường như sau:
CREATE TABLE 'ajax_database' (
'name' varchar(50) NOT NULL,
'age' int(11) NOT NULL,
'sex' varchar(1) NOT NULL,
'wpm' int(11) NOT NULL,
PRIMARY KEY ('name')
)
Tiếp đó bạn sử dụng lệnh INSERT trong MySQL để chèn dữ liệu vào trong bảng.
INSERT INTO 'ajax_database' VALUES ('Phuc', 90, 'm', 20);
INSERT INTO 'ajax_database' VALUES ('Hoang', 75, 'm', 44);
INSERT INTO 'ajax_database' VALUES ('Manh', 45, 'm', 87);
INSERT INTO 'ajax_database' VALUES ('Oanh', 22, 'f', 72);
INSERT INTO 'ajax_database' VALUES ('Huong', 27, 'f', 0);
INSERT INTO 'ajax_database' VALUES ('Lien', 35, 'f', 90);
Nội dung của HTML File trên Client
Tạo một ajax.html trên Client có nội dung giống như:
<html>
<body>
<script language="javascript" type="text/javascript">
<!--
function ajaxFunction(){
var ajaxRequest; // Khai bao mot bien
try{
// Voi cac trinh duyet hien dai: Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
}catch (e){
// Voi trinh duyet IE
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
}catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
}catch (e){
// Thong bao khi xay ra loi
alert("Co loi xay ra voi trinh duyet cua ban!");
return false;
}
}
}
// Tao mot ham de nhan du lieu duoc gui tu Server
// va sau do se update the div trong page
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
var ajaxDisplay = document.getElementById('ajaxDiv');
ajaxDisplay.innerHTML = ajaxRequest.responseText;
}
}
// Bay gio, lay gia tri da nhap tu user va truyen no toi 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'>Hien thi ket qua</div>
</body>
</html>
Phần code trên sẽ cho bạn một màn hình có dạng:
Nội dung của PHP File trên Server
Để đơn giản, trong PHP file này mình sẽ lấy tất cả dữ liệu bao gồm age, wpm, sex từ Database và gửi dữ liệu này quay trở lại Client.
Dưới đây là nội dung của ajax-example.php:
<?php
$dbhost = "localhost";
$dbuser = "dbusername";
$dbpass = "dbpassword";
$dbname = "dbname";
//Ket noi MySQL Server
mysql_connect($dbhost, $dbuser, $dbpass);
//Select Database
mysql_select_db($dbname) or die(mysql_error());
// Lay du lieu
$age = $_GET['age'];
$sex = $_GET['sex'];
$wpm = $_GET['wpm'];
// Ngan hien tuong SQL Injection boi su dung ham escape
$age = mysql_real_escape_string($age);
$sex = mysql_real_escape_string($sex);
$wpm = mysql_real_escape_string($wpm);
//Xay dung cau QUERY
$query = "SELECT * FROM ajax_database 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());
//Ket qua:
$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>";
// Chen mot hang moi vao trong bang
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;
?>
Cuối cùng, bạn khởi động Server, chạy và kiểm tra kết quả.
Đã có app VietJack trên điện thoại, giải bài tập SGK, SBT Soạn văn, Văn mẫu, Thi online, Bài giảng....miễn phí. Tải ngay ứng dụng trên Android và iOS.
Loạt bài hướng dẫn học Ajax cơ bản và nâng cao của chúng tôi dựa trên nguồn tài liệu của: Tutorialspoint.com
Follow fanpage của team https://www.facebook.com/vietjackteam/ hoặc facebook cá nhân Nguyễn Thanh Tuyền https://www.facebook.com/tuyen.vietjack để tiếp tục theo dõi các loạt bài mới nhất về Java,C,C++,Javascript,HTML,Python,Database,Mobile.... mới nhất của chúng tôi.
