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

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > AJAX教程(10)：AJAX 数据库实例

Javascript: IE与firefox下Dhtml的一些区别小结; jQuery Selectors(选择器)的使用(一、基本篇); jQuery Selectors(选择器)的使用(二、层次篇); jQuery 跨域访问问题解决方法; jquery的ajax从纯真网(cz88.net)获取IP地址对应地区名; javascript 面向对象全新理练之数据的封装; javascript 面向对象全新理练之继承与多态; javascript 面向对象全新理练之原型继承; JavaScript 生成随机数并自动大小排序; JavaScript利用split函数按规定截取字符串(获取邮箱用户名); JavaScript 双级下拉菜单实现代码; JavaScript split()使用方法与示例; 33种Javascript 表格排序控件收集; js 屏蔽鼠标右键脚本附破解方法; javascript json 新手入门文档; jQuery Selectors(选择器)的使用(四-五、内容篇&可见性篇); javascript KeyDown、KeyPress和KeyUp事件的区别与联系; javascript 汉字转拼音实现代码; javascript 跳转代码集合; JavaScript 申明函数的三种方法每个函数就是一个对象（一）

No. « ‹ 244 245 246 247 › »

技术文章搜索

关键字

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

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-28 浏览: 140 ::

收藏到网摘: n/a

AJAX教程(9)：AJAX 请求源代码 AJAX教程(11)：AJAX XML 实例

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