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

AJAX có thể được sử dụng để giao tiếp tương tác 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: Trang web cách đọc thông tin từ cơ sở dữ liệu qua AJAX:

Ví dụ

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

Thử nghiệm trực tiếp

Giải thích ví dụ - hàm showCustomer()

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()" được thực hiện. Hàm này được onchange Gặp sự kiện:

showCustomer

function showCustomer(str) {
  var xhttp; 
  if (str == "") {
    document.getElementById("txtHint").innerHTML = "";
    return;
  }
  xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState  == 4 && this.status == 200) {
    document.getElementById("txtHint").innerHTML  = this.responseText;
    }
  };
  xhttp.open("GET",  "getcustomer.asp?q=" + str, true);
  xhttp.send();
}

Hàm showCustomer() thực hiện như sau:

  • Kiểm tra xem có chọn khách hàng hay không
  • Tạo đối tượng XMLHttpRequest
  • Tạo hàm sẽ được thực hiện khi máy chủ phản hồi
  • Gửi yêu cầu đến tệp trên máy chủ
  • Lưu ý rằng tham số q được thêm vào URL (đ附带 danh sách thả xuống)

Trang máy chủ AJAX

Trang máy chủ được gọi bởi JavaScript trên đây là tệp ASP có tên "getcustomer.asp".

Việc sử dụng PHP hoặc ngôn ngữ máy chủ khác giúp dễ dàng viết lại tệp máy chủ này.

Xin xem ví dụ PHP tương ứng。

Văn bản nguồn trong "getcustomer.asp" thực hiện truy vấn hướng database và hiển thị 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("customers.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>")
 tiếp theo
 rs.MoveNext
vòng lặp
response.write("</table>")
%>