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

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

Javascript: document.createElement()用法及注意事项; Javascript教程：关于内存泄漏问题; 延迟事件为0的setTimeout的真正目的; JavaScript图片特效代码下载; AJAX初学:IE缓存页面的问题; AJAX中DOM的操作方法; AJAX中文乱码的两类问题; javascript程序的执行效率问题; 网页用户注册界面的设计; ajax应该如何应用？; 详解Javascript匿名函数的使用; Ajax：研究密码强度规则(仿google); JavaScript学习教程; 网页制作中常用的Javascript代码; 深入学习Javascript函数; JS的Object类的属性和方法; Javascript初学者实例教程(1):简单交互; Javascript初学者实例教程(2):event对象和事件; Javascript初学者实例教程(3):数组和slice()方法; Javascript初学者实例教程(4):对象和构造方法

No. « ‹ 163 164 165 166 › »

技术文章搜索

关键字

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

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

收藏到网摘: 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>")
%>