返回旧版| 微信建站| 建站之家论坛| 我要建站 | 建站学习 | 加入收藏
Ajax入门当前位置:首页 > HTML教程 > Ajax入门 > 正文

AJAX 数据库实例

发布时间:2013-12-13 10:06:00   来源:   点击:

 AJAX 可用来与数据库进行动态通信。
AJAX 数据库实例
下面的例子将演示网页如何通过 AJAX 从数据库读取信息:
请在下面的下拉列表中选择一个客户:

AJAX 数据库实例
实例源代码:
  1. <html> 
  2. <head> 
  3. <script type="text/javascript"> 
  4. function showHint(str) 
  5. var xmlhttp; 
  6. if (str.length==0) 
  7.   {  
  8.   document.getElementById("txtHint").innerHTML=""
  9.   return; 
  10.   } 
  11. if (window.XMLHttpRequest) 
  12.   {// code for IE7+, Firefox, Chrome, Opera, Safari 
  13.   xmlhttp=new XMLHttpRequest(); 
  14.   } 
  15. else 
  16.   {// code for IE6, IE5 
  17.   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
  18.   } 
  19. xmlhttp.onreadystatechange=function() 
  20.   { 
  21.   if (xmlhttp.readyState==4 && xmlhttp.status==200) 
  22.     { 
  23.     document.getElementById("txtHint").innerHTML=xmlhttp.responseText; 
  24.     } 
  25.   } 
  26. xmlhttp.open("GET","/ajax/gethint.asp?q="+str,true); 
  27. xmlhttp.send(); 
  28. </script> 
  29. </head> 
  30. <body> 
  31.  
  32. <h3>请在下面的输入框中键入字母(A - Z):</h3> 
  33. <form action="">  
  34. 姓氏:<input type="text" id="txt1" onkeyup="showHint(this.value)" /> 
  35. </form> 
  36. <p>建议:<span id="txtHint"></span></p>  
  37.  
  38. </body> 
  39. </html> 
 

实例解释 - showCustomer() 函数

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

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

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. sqlsql=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. %> 

 

上一篇:AJAX 实例详解
下一篇:最后一页
版权所有:郑州腾石网络科技有限公司 备案信息:豫ICP备18019117号
站长QQ:2863868475 业务合作咨询:15137100750(同微信)
本站所有投放的广告是有其他网站提供,不代表本站立场,同时网站首页广告位对外出租详情咨询本站站长!同时欢迎广大站长加入个人建站团队
  • 建站客服
  • CMS仿站
  • CMS学习
  • 技术交流群:336572814