AJAX高级学习(3)——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 xmlHttpfunction 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=-1sql="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, connresponse.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.MoveNextloopresponse.write("</table>")%>?
?
?
?
?