AJAX Database 范例 - 学习 AJAX - 简单教程，简单编程

AJAX 请求的动态数据一般是保存在数据库里的。在前面章节中我们学习了如何使用 PHP/ASP 开发 AJAX 服务器端

这章节，我们将要学习如何使用 PHP/ASP 开发连接数据库，以响应 AJAX 的请求

AJAX 数据库范例

这个范例将演示网页如何通过 AJAX 从数据库读取信息

范例

请在下面的下拉列表中选择一个客户

客户信息将显示在这...

运行范例 »

当我们在上面的下拉列表中选择某个客户时，会执行名为 "showCustomer()" 的函数

该函数由 "onchange" 事件触发

function showCustomer(str)
{
  var xmlhttp;    
  if (str=="")
  {
    document.getElementById("txtHint").innerHTML="";
    return;
  }
  if (window.XMLHttpRequest)
  {
    // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xmlhttp=new XMLHttpRequest();
  }
  else
  {
    // 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","/r/show/yufei/json/getcustomer?sid="+str,true);
  xmlhttp.send();
}

showCustomer() 函数执行以下任务：

检查是否已选择某个客户
创建 XMLHttpRequest 对象
当服务器响应就绪时执行所创建的函数
把请求发送到服务器上的文件
请注意我们向 URL 添加了一个参数 sid （带有输入域中的内容）

AJAX 服务器页面

由上面的 JavaScript 调用的服务器页面是 ASP 文件，名为 "getcustomer.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>")

你也可以使用其它语言来写这个范例的服务器页面

比如使用 PHP 语言，请看用 PHP 编写的相应的例子