AJAX 数据库实例

Maaaring gamitin ang AJAX para sa magiging kaugnay ang database.

AJAX 数据库实例

Ang mga sumusunod na halimbawa ay nagpapakita kung paano magiging kaugnay ang web page sa database sa pamamagitan ng AJAX:

Ang impormasyon ng customer ay magpapakita dito.

Subukan ang pinagmulan ng kodigo

Mga Halimbawa - HTML Pahina

Kapag pinili ng user ang isang customer mula sa ibabaw na dropdown list, magsasakatuparan ang function na may pangalang "showCustomer()". Ang function na ito ay binubunyag ng "onchange" na kodigo:

<!DOCTYPE html>
<html>
<head>
<script>
function showCustomer(str)
{
if (str=="")
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  // Para sa IE7+, Firefox, Chrome, Opera, Safari na kodigo
  xmlhttp=new XMLHttpRequest();
  }
else
  // Para sa IE6, IE5 na kodigo
  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="">Piliin ang isang customer:</option>
<option value="ALFKI">Alfreds Futterkiste</option>
<option value="NORTS ">North/South</option>
<option value="WOLZA">Wolski Zajazd</option>
</select>
</form>
<br>
<div id="txtHint">客户信息将在此处列出...</div>
</body>
</html>

源代码解释：

如果没有选择客户（str.length 等于 0），那么该函数会清空 txtHint 占位符，然后退出该函数。

如果已选择一位客户，则 showCustomer() 函数会执行以下步骤：

  • 创建 XMLHttpRequest 对象
  • 创建在服务器响应就绪时执行的函数
  • 向服务器上的文件发送请求
  • 请注意添加到 URL 末端的参数（q）（包含下拉列表的内容）

ASP 文件

上面这段 JavaScript 调用的服务器页面是名为 “getcustomer.asp” 的 ASP 文件。

“getcustomer.asp” 中的源代码会运行一次针对数据库的查询，然后在 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>")
%>