Mô hình cơ sở dữ liệu AJAX

AJAX có thể được sử dụng để giao tiếp song phương với cơ sở dữ liệu.

Mô hình cơ sở dữ liệu AJAX

Dưới đây là ví dụ minh họa cách trang web sử dụng AJAX để đọc thông tin từ cơ sở dữ liệu:

Thông tin khách hàng sẽ được liệt kê ở đây.

Thử mã nguồn ngay bây giờ

Giải thích mẫu - Trang HTML

Khi người dùng chọn một khách hàng trong danh sách thả xuống trên đây, hàm "showCustomer()" sẽ được thực hiện. Hàm này được kích hoạt bởi sự kiện "onchange":

<!DOCTYPE html>
<html>
<head>
<script>
function showCustomer(str)
{
if (str=="")
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  // Đối với IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  // Đối với IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","getcustomer.asp?q="+str,true);
xmlhttp.send();
}
</script>
</head
<body>
<form>
<select name="customers" onchange="showCustomer(this.value)">
<option value="">Chọn khách hàng:</option>
<option value="ALFKI">Alfreds Futterkiste</option>
<option value="NORTS ">Bắc/Nam</option>
<option value="WOLZA">Wolski Zajazd</option>
</select>
</form>
<br>
<div id="txtHint">Thông tin khách hàng sẽ được liệt kê tại đây...</div>
</body>
</html>

Giải thích mã nguồn:

Nếu chưa chọn khách hàng (str.length bằng 0), hàm sẽ xóa ký tự chờ tại txtHint, sau đó thoát khỏi hàm.

Nếu đã chọn một khách hàng, hàm showCustomer() sẽ thực hiện các bước sau:

  • Tạo đối tượng XMLHttpRequest
  • Tạo hàm sẽ được thực hiện khi máy chủ sẵn sàng phản hồi
  • Gửi yêu cầu đến tệp trên máy chủ
  • Lưu ý thêm tham số (q) vào cuối URL (chứa nội dung của danh sách thả xuống)

Tệp ASP

Trang web dịch vụ này được gọi là tệp ASP có tên là "getcustomer.asp".

Mã nguồn trong "getcustomer.asp" sẽ thực hiện một truy vấn vào cơ sở dữ liệu một lần, sau đó trả về kết quả trong bảng HTML:

<%
response.expires=-1
sql="SELECT * FROM CUSTOMERS WHERE CUSTOMERID="
sql=sql & "'" & request.querystring("q") & "'"
set conn=Server.CreateObject("ADODB.Connection")
conn.Provider="Microsoft.Jet.OLEDB.4.0"
conn.Open(Server.Mappath("/db/northwind.mdb"))
set rs=Server.CreateObject("ADODB.recordset")
rs.Open sql,conn
response.write("<table>")
do until rs.EOF
  for each x in rs.Fields
    response.write("<tr><td><b>" & x.name & "</b></td>")
    response.write("<td>" & x.value & "</td></tr>")
  next
  rs.MoveNext
loop
response.write("</table>")
%>