– AJAX thường được sử dụng để tương tác với cơ sở dữ liệu
– Ví dụ bên dưới sẽ cho các bạn thấy cách một trang web lấy dữ liệu từ cơ sở dữ liệu bằng AJAX.
– Bảng cơ sở dữ liệu mà tôi sử dụng trong bài hướng dẫn này nó có tên là student, nó giống như bên dưới:
| ID | Name | Gender | Year | City |
| 1 | Lý Thanh Phong | Nam | 1994 | Cần Thơ |
| 2 | Đinh Linh San | Nữ | 1998 | Vĩnh Long |
| 3 | Vương Khải Minh | Nam | 2002 | Cần Thơ |
| 4 | Trần Phong | Nam | 1997 | Vĩnh Long |
| 5 | Lê Tử Huân | Nữ | 2000 | Sóc Trăng |
| 6 | Tần Bá Thiên | Nam | 1995 | Vĩnh Long |
– Ở ví dụ trên, khi người dùng chọn một sinh viên khác thì sự kiện onchange được kích hoạt, nó sẽ gọi đến hàm showStudent() để thực thi.
– Dưới đây là đoạn mã HTML của trang web ở ví dụ phía trên.
<!DOCTYPE html>
<html>
<head>
<title>Thông tin sinh viên</title>
<script>
function showStudent(id_sinhvien){
if(id_sinhvien==""){
document.getElementById("table").innerHTML = "";
}else{
var myRequest = new XMLHttpRequest();
myRequest.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("table").innerHTML = this.responseText;
}
};
myRequest.open("GET","student.php?id="+id_sinhvien,true);
myRequest.send();
}
}
</script>
</head>
<body>
<select onchange="showStudent(this.value)">
<option value="">Chọn sinh viên:</option>
<option value="1">Lý Thanh Phong</option>
<option value="2">Đinh Linh San</option>
<option value="3">Vương Khải Minh</option>
<option value="4">Trần Phong</option>
<option value="5">Lê Tử Huân</option>
<option value="6">Tần Bá Thiên</option>
</select>
<div id="table" style="margin:20px 0px">THÔNG TIN SINH VIÊN SẼ HIỂN THỊ Ở ĐÂY</div>
</body>
</html>Giải thích ý nghĩa của hàm showStudent()
– Trước tiên kiểm tra trường select có bị bỏ trống hay không (tức là chưa chọn sinh viên), nếu bị bỏ trống thì xóa hết nội dung bên trong phần tử #table, còn không thì tiếp tục thực thi các công việc bên dưới.
- Tạo một đối tượng XMLHttpRequest có tên là myRequest.
- Tạo một chức năng sẽ được thực thi khi phản hồi của máy chủ sẵn sàng.
- Gửi yêu cầu đến tập tin student.php trên máy chủ, lưu ý rằng khi gửi yêu cầu thì chúng ta cần phải truyền thêm một tham số có tên là id dùng để chứa id của sinh viên.
– Dưới đây là nội dung của tập tin student.php (chức năng của nó là tìm kiếm sinh viên trong bảng student dựa theo id của sinh viên, sau đó trả về bảng thông tin sinh viên trùng khớp)
<?php
$id = intval($_GET['id']);
$connect = mysqli_connect("localhost", "root", "", "my_db");
if(!$connect){
die("Không thể kết nối đến cơ sở dữ liệu: " . mysqli_error($connect));
}
mysqli_select_db($connect,"thamkhao");
$sql = "SELECT * FROM student WHERE id = '".$id."'";
$result = mysqli_query($connect,$sql);
echo "<table border='1' cellpadding='10'>
<tr>
<th>ID</th>
<th>Họ tên</th>
<th>Giới tính</th>
<th>Năm sinh</th>
<th>Thành phố</th>
</tr>";
while($row = mysqli_fetch_array($result)){
echo "<tr>";
echo "<td>" . $row['ID'] . "</td>";
echo "<td>" . $row['Name'] . "</td>";
echo "<td>" . $row['Gender'] . "</td>";
echo "<td>" . $row['Year'] . "</td>";
echo "<td>" . $row['City'] . "</td>";
echo "</tr>";
}
echo "</table>";
mysqli_close($connect);
?>