Tìm hiểu ví dụ về AJAX Database

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

Ví dụ về AJAX Database

Ví dụ sau sẽ cho thấy một trang web có thể lấy thông tin từ cơ sở dữ liệu bằng AJAX như thế nào:

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, một hàm gọi là “showCustomer()” được thực thi. Hàm được kích hoạt bởi sự kiện “onchange”:

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 nếu khách hàng đã được chọn
• Tạo một đối tượng XMLHttpRequest
• Tạo ra các hàm để được thực hiện khi phản hồi của máy chủ đã sẵn sàng
• Gửi yêu cầu tới tệp tin trên máy chủ
• Lưu ý rằng một tham số (q) được thêm vào URL (với nội dung của danh sách thả xuống)

Trang trên máy chủ được gọi bởi JavaScript trong ví dụ trên là một tệp tin ASP được gọi là “getcustomer.asp”. Các tập tin máy chủ có thể dễ dàng được viết lại trong PHP, hoặc một số ngôn ngữ máy chủ khác.

Mã nguồn trong “getcustomer.asp” chạy một truy vấn đối với một cơ sở dữ liệu và trả về kết quả trong một 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("/datafolder/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>")
%>