Lessons XXXII : Tương tác Database dùng Ajax

Tương tác Database dùng Ajax

Thứ tư, 20 Tháng 8 2008 02:21 w3schools.com Hướng dẫn lập trình Ajax-JavaScript
Email In

Tiếp tục với đề tài Ajax, sau khi đã hoàn tất ứng dụng suggestion đơn giản dùng Ajax hẳn sẻ phát sinh vấn đề: nếu những suggestion nầy mình không tự tạo bằng tay mà lấy từ database thì sao???
Câu trả lời: mình hoàn toàn có thể dùng Ajax tương tác với database

Hình sau minh họa cách bạn thể hiện thông tin từ database lên trang web sau khi bạn chọn một item từ danh sách:

Để hiện thực ứng dụng nầy chúng ta cần:

Một form HTML đẹp đẽ như thế nầy:

<html>
<head>
<script src="/trung-tam-tin-hoc/selectcustomer.js"></script>
</head> <body> <form> 
Select a Customer:
<select name="customers" onchange="showCustomer(this.value)">
<option value="ALFKI">Alfreds Futterkiste
<option value="NORTS ">North/South
<option value="WOLZA">Wolski Zajazd 
</select>
</form> <p>
<div id="txtHint"><b>Customer info will be listed here.</b></div>
</p> </body>
</html>

Đoạn code trên có một thẻ div là txtHint – sử dụng như là một nơi để nhận giá trị trả về từ server.
Khi người dùng chọn từ danh sách thì hàm showCustomer() được thực thi thông qua sự kiện onchange.

và nội dung của file selectcustomer.js như sau:

var xmlHttp

function showCustomer(str)
{ 
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
  {
  alert ("Your browser does not support AJAX!");
  return;
  } 
var url="getcustomer.asp";
url=url+"?q="+str;
url=url+"&sid="+Math.random();
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}

function stateChanged() 
{ 
if (xmlHttp.readyState==4)
{ 
document.getElementById("txtHint").innerHTML=xmlHttp.responseText;
}
}

function GetXmlHttpObject()
{
var xmlHttp=null;
try
  {
  // Firefox, Opera 8.0+, Safari
  xmlHttp=new XMLHttpRequest();
  }
catch (e)
  {
  // Internet Explorer
  try
    {
    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    }
  catch (e)
    {
    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
  }
return xmlHttp;
}

Tiếp theo chúng ta xây dựng code phía server.

Ta sẻ tạo trang getcustomer.asp được viết bằng VBScript và chạy trên IIS (hoặc bạn có thể tham khảo cách viết bằng PHP tại đây)

<%
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>")
%>

Đoạn code thực thi một câu lệnh SQL truy vấn và trả kết quả về dướii dạng HTML.
Hoàn toàn đơn giản phải không các bạn

Nguồn: 2IT.in
Theo w3schools.com

  1. Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: