AJAX 数据库实例

AJAX 可用来与数据库进行动态通信。

AJAX 数据库实例

下面的例子将演示网页如何通过 AJAX 从数据库读取信息：

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

  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4. function showCustomer(str)
  5. {
  6. var xmlhttp;    
  7. if (str=="")
  8.   {
  9.   document.getElementById("txtHint").innerHTML="";
  10.   return;
  11.   }
  12. if (window.XMLHttpRequest)
  13.   {// code for IE7+, Firefox, Chrome, Opera, Safari
  14.   xmlhttp=new XMLHttpRequest();
  15.   }
  16. else
  17.   {// code for IE6, IE5
  18.   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  19.   }
  20. xmlhttp.onreadystatechange=function()
  21.   {
  22.   if (xmlhttp.readyState==4 && xmlhttp.status==200)
  23.     {
  24.     document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
  25.     }
  26.   }
  27. xmlhttp.open("GET","/ajax/getcustomer.asp?q="+str,true);
  28. xmlhttp.send();
  29. }
  30. </script>
  31. </head>
  32. <body>
  34. <form action="" style="margin-top:15px;"> 
  35. <label>请选择一位客户：
  36. <select name="customers" onchange="showCustomer(this.value)" style="font-family:Verdana, Arial, Helvetica, sans-serif;">
  37. <option value="APPLE">Apple Computer, Inc.</option>
  38. <option value="BAIDU ">BAIDU, Inc</option>
  39. <option value="Canon">Canon USA, Inc.</option>
  40. <option value="Google">Google, Inc.</option>
  41. <option value="Nokia">Nokia Corporation</option>
  42. <option value="SONY">Sony Corporation of America</option>
  43. </select>
  44. </label>
  45. </form>
  46. <br />
  47. <div id="txtHint">客户信息将在此处列出 ...</div>
  49. </body>
  50. </html>

实例解释 - showCustomer() 函数

当用户在上面的下拉列表中选择某个客户时，会执行名为 "showCustomer()" 的函数。该函数由 "onchange" 事件触发：

  1. function showCustomer(str)
  2. {
  3. var xmlhttp;
  4. if (str=="")
  5.   {
  6.   document.getElementById("txtHint").innerHTML="";
  7.   return;
  8.   }
  9. if (window.XMLHttpRequest)
  10.   {// code for IE7+, Firefox, Chrome, Opera, Safari
  11.   xmlhttp=new XMLHttpRequest();
  12.   }
  13. else
  14.   {// code for IE6, IE5
  15.   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  16.   }
  17. xmlhttp.onreadystatechange=function()
  18.   {
  19.   if (xmlhttp.readyState==4 && xmlhttp.status==200)
  20.     {
  21.     document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
  22.     }
  23.   }
  24. xmlhttp.open("GET","getcustomer.asp?q="+str,true);
  25. xmlhttp.send();
  26. }

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

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

AJAX 服务器页面

由上面的 JavaScript 调用的服务器页面是 ASP 文件，名为 "getcustomer.asp"。

用 PHP 编写服务器文件也很容易，或者用其他服务器语言。请看用 PHP 编写的相应的例子。

"getcustomer.asp" 中的源代码负责对数据库进行查询，然后用 HTML 表格返回结果：

  1. <%
  2. response.expires=-1
  3. sql="SELECT * FROM CUSTOMERS WHERE CUSTOMERID="
  4. sql=sql & "'" & request.querystring("q") & "'"
  5.  
  6. set conn=Server.CreateObject("ADODB.Connection")
  7. conn.Provider="Microsoft.Jet.OLEDB.4.0"
  8. conn.Open(Server.Mappath("/db/northwind.mdb"))
  9. set rs=Server.CreateObject("ADODB.recordset")
  10. rs.Open sql,conn
  11.  
  12. response.write("<table>")
  13. do until rs.EOF
  14.   for each x in rs.Fields
  15.     response.write("<tr><td><b>" & x.name & "</b></td>")
  16.     response.write("<td>" & x.value & "</td></tr>")
  17.   next
  18.   rs.MoveNext
  19. loop
  20. response.write("</table>")
  21. %>