AJax技术

AJAX教程(10):AJAX 数据库实例

字号+ 作者:H5之家 来源:H5之家 2017-11-27 09:03 我要评论( )

AJAX教程(10):AJAX 数据库实例,AJAX 可用来与数据库进行动态地通信。

网页制作Webjx文章简介:AJAX 可用来与数据库进行动态地通信。

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

AJAX 数据库实例

在下面的 AJAX 例子中,我们将演示如何使用 AJAX 技术令网页从数据库读取信息。

在下面的框中选择一个名字

AJAX 实例解释

上面的实例包含了一个简单的 HTML 表单以及执行 JavaScript 的链接:

<html> <head> <script src="selectcustomer.js"></script> </head> <body> <form> 请选择一位客户: <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>客户信息将在此处列出。</b></div> </p> </body> </html>

正如您看到的,这是一个简单的带有一个名为 "customers" 下拉列表的 HTML 表单。

表单以下的段落包含了一个名为 "txtHint" 的 div,这个 div 充当了由 web 服务器所取回的信息的位置占位符。

当用户选择数据时,名为 "showCustomer()" 的函数会被执行。函数的执行会被 "onchange" 事件触发。另外需要说明的是:每当用户改变下拉列表中的值,函数 showCustomer 就会被调用。

下面列出了 JavaScript 代码。

AJAX JavaScript

这是存储在文件 "selectcustomer.js" 中的 JavaScript 代码:

var xmlHttp function showCustomer(str) { xmlHttp=GetXmlHttpObject(); if (xmlHttp==null) { alert ("您的浏览器不支持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; }

AJAX 服务器页面

这个被 JavaScript 调用的服务器页面,是一个名为 "getcustomer.asp" 的简单的 ASP 文件。

此页面使用 VBScript 针对 IIS 编写。可以使用 PHP 或其他服务器语言对它进行改写。

此代码可运行针对某个数据库的 SQL,并以 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><em>" & x.name & "</em></td>") response.write("<td>" & x.value & "</td></tr>") next rs.MoveNext loop response.write("</table>") %>

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • AJAX教程(2):AJAX Http请求

    AJAX教程(2):AJAX Http请求

    2017-02-27 09:02

  • AJAX教程(8):AJAX 请求实例

    AJAX教程(8):AJAX 请求实例

    2017-02-27 09:01

  • AJAX教程(3):AJAX实例

    AJAX教程(3):AJAX实例

    2015-10-31 08:00

  • PHP+AJAX教程(4):PHP和AJAX XML实例

    PHP+AJAX教程(4):PHP和AJAX XML实例

    2015-10-30 15:52

网友点评