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>")
%>

posted on 2007-10-30 12:56 杜军阅读(491) 评论(0) 收藏举报

刷新页面返回顶部

绿豆.Net

公告

AJAX 实例解释

AJAX JavaScript

AJAX 服务器页面