AJAX 数据库实例
2010-01-11 10:37
429 查看
AJAX 可用来与数据库进行动态地通信。
</head>
<body>
请选择一位客户:
<select
<option value="ALFKI">Alfreds Futterkiste
<option value="NORTS ">North/South
<option value="WOLZA">Wolski Zajazd
</select>
<p>
<div
</p>
</body>
</html>
[/code] 正如您看到的,这是一个简单的带有一个名为 "customers" 下拉列表的 HTML 表单。
表单以下的段落包含了一个名为 "txtHint" 的 div,这个 div 充当了由 web 服务器所取回的信息的位置占位符。
当用户选择数据时,名为 "showCustomer()" 的函数会被执行。函数的执行会被 "onchange" 事件触发。另外需要说明的是:每当用户改变下拉列表中的值,函数 showCustomer 就会被调用。
下面列出了 JavaScript 代码。
{
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);
}
{
if (xmlHttp.readyState==4)
{
document.getElementById("txtHint").innerHTML=xmlHttp.responseText;
}
}
{
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;
}[/code]
此页面使用 VBScript 针对 IIS 编写。可以使用 PHP 或其他服务器语言对它进行改写。
此代码可运行针对某个数据库的 SQL,并以 HTML 表格返回结果:
AJAX 数据库实例
在下面的 AJAX 例子中,我们将演示如何使用 AJAX 技术令网页从数据库读取信息。在下面的框中选择一个名字
请选择一位客户: Apple Computer, Inc. BAIDU, Inc Canon USA, Inc. Google, Inc. Nokia Corporation Sony Corporation of AmericaCustomerID | BAIDU |
CompanyName | BAIDU, Inc |
ContactName | Li YanHong |
Address | Lixiang guoji dasha,No 58, beisihuanxilu |
City | Beijing |
PostalCode | 100080 |
Country | China |
AJAX 实例解释
上面的实例包含了一个简单的 HTML 表单以及执行 JavaScript 的链接:<html> <head> [code]<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>
[/code] 正如您看到的,这是一个简单的带有一个名为 "customers" 下拉列表的 HTML 表单。
表单以下的段落包含了一个名为 "txtHint" 的 div,这个 div 充当了由 web 服务器所取回的信息的位置占位符。
当用户选择数据时,名为 "showCustomer()" 的函数会被执行。函数的执行会被 "onchange" 事件触发。另外需要说明的是:每当用户改变下拉列表中的值,函数 showCustomer 就会被调用。
下面列出了 JavaScript 代码。
AJAX JavaScript
这是存储在文件 "selectcustomer.js" 中的 JavaScript 代码:var xmlHttp [code]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;
}[/code]
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>") %>
相关文章推荐
- C#基于数据库存储过程的AJAX分页实例
- AJAX教程7- 数据库实例
- PHP 和 AJAX MySQL 数据库实例 (总结)
- PHP 和 AJAX MySQL 数据库实例
- AJAX 数据库实例
- query ajax json 通过后台代码(查询数据库)绑定html控件select 下拉框实例
- ajax链接数据库实例
- AJAX 数据库实例
- ASP.NET4.0 Ajax实例 –Javascript调用 ADO.NET Data Service实现数据库操作
- AJAX数据库实例
- PHP 和 AJAX MySQL 数据库实例
- 1.简单实例:ASP.NET下Echarts通过Ajax从数据库中获取数据
- ASP.NET4.0 Ajax实例 –Javascript调用 ADO.NET Data Service实现数据库操作
- PHP 和 AJAX MySQL 数据库实例
- 通过数据库和ajax方法写出地图的实例代码
- jquery+ajax+C#实现无刷新操作数据库数据的简单实例
- AJAX 数据库实例
- AJAX 数据库实例
- ajax.net对数据库的插入实例
- AJAX 数据库实例