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

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

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

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

htmlheadscript src="selectcustomer.js"/script/headbodyform请选择一位客户：select name="customers" onchange="showCustomer(this.value)"option value="ALFKI"Alfreds Futterkisteoption value="NORTS "North/Southoption value="WOLZA"Wolski Zajazd /select/formpdiv id="txtHint"b客户信息将在此处列出。/b/div/p/body/html

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

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

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

下面列出了 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;}

这个被 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.Fieldsresponse.write("trtdem" & x.name & "/em/td")response.write("td" & x.value & "/td/tr")  next  rs.MoveNextloopresponse.write("/table")%