Kết quả bài tâp này như sau:
Sau khi gõ SCB vào textfield và nhấn button thì kết quả xuất giá chứng khoán sẽ xuất ra 11.2 mà không phải request lại server. Đây là điểm nổi bật của ajax mà hocweb muốn giới thiệu với các bạn trong bài tập này.
Cách thức để làm bài tập này như sau:
Bước 1: Ta xây dưng cơ sỡ dữ liệu để làm bài tập này như sau:
Bước 2: Ta xây dựng file javascript scripts.js như sau:
var req;
function loadXMLDoc(str)
{
// branch for native XMLHttpRequest object
var url="process.php";
url=url+"?q="+str;
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
req.onreadystatechange = processReqChange;
req.open("GET", url, true);
req.send(null);
// branch for IE/Windows ActiveX version
} else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
if (req) {
req.onreadystatechange = processReqChange;
req.open("GET", url, true);
req.send();
}
}
}
function processReqChange()
{
if (req.readyState == 4) // khong xay ra van de gi va da nhan duoc response day du tu server
{
if (req.status == 200) // trang thai response tra lai dau hieu tot, nguoc lai thi co van de trong tiep nhan va xu ly request
{
document.getElementById("gia1").innerHTML=req.responseText;// reg.responseText tra lai duoi dang chuoi van ban.
}
else
{
alert("loi ket noi hoac truy van");
}
}
}
Ta giải thích 1 chút:
/*
Tạo object XmlHttpRequest. Vì trinh duyệt IE va Mozilla áp dụng kỹ thuật này theo 2 cách khác nhau,
để đảm bảo tính tương thich, chúng ta sẽ cần phải kiểm tra xem người dùng đang sử dụng trình duyệt nào
và tạo đối tượng XmlHttpRequest theo phương thức hỗ trợ bởi trình duyệt đó.
*/
/*
Hàm (function) processReqChange là hàm chịu trách nhiệm chính xử lý việc gởi dữ liệu và nhận dữ liệu
Các bước mà hàm này thực hiện
1. Đợi cho máy chủ phản hồi thông báo là nó đã xử lý xong.
2. Đọc thông báo từ máy chủ (máy chủ sẽ gửi status =200 nên xử lý thành công, 404 khi file không tìm thấy .. )
Nếu máy chủ nói là xử lý thành công thì tiếp tục bước tiếp theo.
3. httpRequest.responseText – Trang web được trả lại dưới dạng chuỗi văn bản.
*/
Bước 2:
document.getElementById(“gia1”).innerHTML=req.responseText;
giá trị văn bản trả về ở bước 1 với id là “gia1”
Ta xây dựng giao diện để nhập đầu vào ra nơi biến xuất ra kết quả .
Code của giao diện trên như sau:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <script language="javascript" src="scripts.js"></script> </head> <body> <form id="form1" name="form1" method="post" action=""> <input type="text" name="mack" id="mack"/> <input type="button" name="button" id="button" value="Button" onclick="loadXMLDoc(document.form1.mack.value)" /> </form> <div id="gia1"></div> </body> </html>
Đoạn code <div id=”gia1″></div> là nơi dữ liệu được show ra từ cơ cỡ dữ liệu. Vậy cơ sỡ dữ liệu ở đâu ?
Ta qua bước 3:
Ta xây dựng file proccess.php để lấy dữ liệu từ cơ sỡ dữ liệu như sau:
<?php
require_once("dbcon.php");
$s="select * from ck where mack='".$_GET["q"]."'";
$kq=mysql_query($s,$link);
echo "<p>";
if (mysql_num_rows($kq)>0)
{
$d=mysql_fetch_array($kq);
echo "Gia chung khoan la:".$d["gia"];
}
else
{
echo "Khong tim thay!";
}
echo "</p>";
?>
Ở đây File dbcon.php giống các bài tập trước.
Ta có kết luận của bài tập này là: Việc show dữ liệu lúc này dựa vào file js chứ không sử dụng trưc tiếp gọi file proccess.php giống như các bài tập show dữ liệu hôm trước chúng ta làm
Chúc các bạn vui với bài tập thú vị này.