ASP+AJAX+ACCESS数据库实例讲解三个步骤分享
数据库 / 管理员 发布于 7年前 219
-
上一条：
NT IIS下用ODBC连接数据库
下一条：
ASP连接SQL2005数据库连接代码 - 相关文章
- 分库分表的目的、优缺点及具体实现方式介绍(0个评论)
- DevDB - 在 VS 代码中直接访问数据库(0个评论)
- 在ubuntu系统中实现mysql数据存储目录迁移流程步骤(0个评论)
- 在mysql中使用存储过程批量新增测试数据流程步骤(0个评论)
- php+mysql数据库批量根据条件快速更新、连表更新sql实现(0个评论)
- 近期文章
- OpenAI GPT-5.5正式发布：更会编程和使用计算机的最强模型!(0个评论)
- opencode AI智能体自主规划开发游戏:王者荣耀模拟战游戏初体验!英雄角色开发中...(0个评论)
- opencode AI智能体自主规划开发游戏:王者荣耀模拟战游戏初体验!(0个评论)
- opencode + Oh-my-openagent,我的第一个免费的ai编程智能体管家:Sisyphus(0个评论)
- Google AI Studio升级全栈 vibe coding体验，可直接构建带登录和数据库的应用(0个评论)
- Apifox桌面端被曝遭供应链投毒：CDN 脚本被篡改，窃取 SSH 密钥与 Git 凭证(0个评论)
- 在go语言中实现字符串可逆性压缩及解压缩功能(0个评论)
- 使用go + gin + jwt + qrcode实现网站生成登录二维码在app中扫码登录功能(0个评论)
- 在windows10中升级go版本至1.24后LiteIDE的Ctrl+左击无法跳转问题解决方案(0个评论)
- 智能合约Solidity学习CryptoZombie第四课:僵尸作战系统(0个评论)
- 近期评论
-
test1 在
opencode + Oh-my-openagent,我的第一个免费的ai编程智能体管家:Sisyphus中评论 test.. -
122 在
学历：一种延缓就业设计，生活需求下的权衡之选中评论 工作几年后，报名考研了，到现在还没认真学习备考，迷茫中。作为一名北漂互联网打工人.. -
Zita 在
Google AI Studio升级全栈 vibe coding体验，可直接构建带登录和数据库的应用中评论 111222.. -
123 在
Clash for Windows作者删库跑路了，github已404中评论 按理说只要你在国内，所有的流量进出都在监控范围内，不管你怎么隐藏也没用，想搞你分.. -
原梓番博客 在
在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了，今天刚看，已经添加。..
看完本篇ajax实例教程，我相信你也可以轻松做出一个初级的AJAX应用。
你也可以直接访问：codes/57017.html 下载ajax教程的源码示例。
好，下面我们就始一步步让你了解AJAX+ASP基础应用，我们将分三步讲解，如下。
1. 前台AJAX代码（javascript）的创建。
2. 后台服务端ASP AJAX代码的编写。
3. ASP+AJAX+数据库的实例演示及讲解。
第一步：前台AJAX代码（javascript）的创建。
我们先创建一个index.html前台文件，内容代码如下：
复制代码 代码如下:
<html>
<head>
<title>AJAX教程实例-AJAX教程实例-ASP+AJAX+ACCESS数据库应用-AIDI原创ajax实例教程</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
</head>
<body>
<script> var xmlHttp
function showCustomer(str)
{
var url="getcustomer.asp?sid=" + Math.random() + "&q=" + str
xmlHttp=GetXmlHttpObject(stateChanged)
xmlHttp.open("GET", url , true)
xmlHttp.send(null)
}
function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
document.getElementById("txtHint").innerHTML=xmlHttp.responseText
}
}
function GetXmlHttpObject(handler)
{
var objXmlHttp=null
if (navigator.userAgent.indexOf("Opera")>=0)
{
alert("This example doesn't work in Opera")
return;
}
if (navigator.userAgent.indexOf("MSIE")>=0)
{
var strName="Msxml2.XMLHTTP"
if (navigator.appVersion.indexOf("MSIE 5.5")>=0)
{
strName="Microsoft.XMLHTTP"
}
try
{
objXmlHttp=new ActiveXObject(strName)
objXmlHttp.onreadystatechange=handler
return objXmlHttp
}
catch(e)
{
alert("Error. Scripting for ActiveX might be disabled")
return
}
}
if (navigator.userAgent.indexOf("Mozilla")>=0)
{
objXmlHttp=new XMLHttpRequest()
objXmlHttp.onload=handler
objXmlHttp.onerror=handler
return objXmlHttp
}
}
</script>
<form>请选择用户:
<select name="customers" onchange="showCustomer(this.value)">
<option value="1">AIDI.by.alixixi.com</option>
<option value="2">哇塞网</option>
<option value="3">收音机</option>
</select>
</form><p>
<div id="txtHint"><b>网站信息...</b></div>
</p></body>
</html>
ajax代码讲解：
关键代码为JS部分，其原理就是创建一个客户的Microsoft.XMLHTTP对象，来完成前台数据与服务端ASP的交互。
然后要注意的就是<select name="customers" onchange="showCustomer(this.value)">
这一行代码，原理就是通过showCustomer(this.value)触发AJAX的前台脚本对象，将用户在下拉列表选择的结果数据通过Microsoft.XMLHTTP发送到服务端处理，再返回到前台ID为txtHint的<div id="txtHint"><b>用户信息...</b></div>层标签显示出来。
第二步：后台服务端ASP AJAX代码的编写。
创建完刚才的index.html，我们接着再创建一个getcustomer.asp文件，请确认你的ASP环境一切OK：）
getcustomer.asp的代码如下：
<html>
<head>
<title>AJAX教程实例-AJAX教程实例-ASP+AJAX+ACCESS数据库应用-AIDI原创ajax实例教程</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
</head>
<body>
<script> var xmlHttp
function showCustomer(str)
{
var url="getcustomer.asp?sid=" + Math.random() + "&q=" + str
xmlHttp=GetXmlHttpObject(stateChanged)
xmlHttp.open("GET", url , true)
xmlHttp.send(null)
}
function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
document.getElementById("txtHint").innerHTML=xmlHttp.responseText
}
}
function GetXmlHttpObject(handler)
{
var objXmlHttp=null
if (navigator.userAgent.indexOf("Opera")>=0)
{
alert("This example doesn't work in Opera")
return;
}
if (navigator.userAgent.indexOf("MSIE")>=0)
{
var strName="Msxml2.XMLHTTP"
if (navigator.appVersion.indexOf("MSIE 5.5")>=0)
{
strName="Microsoft.XMLHTTP"
}
try
{
objXmlHttp=new ActiveXObject(strName)
objXmlHttp.onreadystatechange=handler
return objXmlHttp
}
catch(e)
{
alert("Error. Scripting for ActiveX might be disabled")
return
}
}
if (navigator.userAgent.indexOf("Mozilla")>=0)
{
objXmlHttp=new XMLHttpRequest()
objXmlHttp.onload=handler
objXmlHttp.onerror=handler
return objXmlHttp
}
}
</script>
<form>请选择用户:
<select name="customers" onchange="showCustomer(this.value)">
<option value="1">AIDI.by.alixixi.com</option>
<option value="2">哇塞网</option>
<option value="3">收音机</option>
</select>
</form><p>
<div id="txtHint"><b>网站信息...</b></div>
</p></body>
</html>
ajax代码讲解：
关键代码为JS部分，其原理就是创建一个客户的Microsoft.XMLHTTP对象，来完成前台数据与服务端ASP的交互。
然后要注意的就是<select name="customers" onchange="showCustomer(this.value)">
这一行代码，原理就是通过showCustomer(this.value)触发AJAX的前台脚本对象，将用户在下拉列表选择的结果数据通过Microsoft.XMLHTTP发送到服务端处理，再返回到前台ID为txtHint的<div id="txtHint"><b>用户信息...</b></div>层标签显示出来。
第二步：后台服务端ASP AJAX代码的编写。
创建完刚才的index.html，我们接着再创建一个getcustomer.asp文件，请确认你的ASP环境一切OK：）
getcustomer.asp的代码如下：
复制代码 代码如下:
<%
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("ajaxjiaocheng.mdb"))
set rs = Server.CreateObject("ADODB.recordset")
rs.Open sql, conn
Response.CharSet = "GB2312"
if not rs.EOF then
response.write "<li>编号："&rs(0)&"</li>"
response.write "<li>名称："&rs(1)&"</li>"
response.write "<li>点击："&rs(2)&"</li>"
response.write "<li>介绍："&rs(3)&"</li>"
end if
rs.close
set rs = nothing
conn.close
set conn = nothing
%>
ajax代码讲解：
如果有asp基础的朋友一看就能明白，连接数据库代码及跟据前台发送过来的q参数查询相应的数据库结果：
Top
<%
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("ajaxjiaocheng.mdb"))
set rs = Server.CreateObject("ADODB.recordset")
rs.Open sql, conn
Response.CharSet = "GB2312"
if not rs.EOF then
response.write "<li>编号："&rs(0)&"</li>"
response.write "<li>名称："&rs(1)&"</li>"
response.write "<li>点击："&rs(2)&"</li>"
response.write "<li>介绍："&rs(3)&"</li>"
end if
rs.close
set rs = nothing
conn.close
set conn = nothing
%>
ajax代码讲解：
如果有asp基础的朋友一看就能明白，连接数据库代码及跟据前台发送过来的q参数查询相应的数据库结果：
复制代码 代码如下:
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("ajaxjiaocheng.mdb"))
set rs = Server.CreateObject("ADODB.recordset")
rs.Open sql, conn
接着要注意的就是这行代码：
Response.CharSet = "GB2312" ‘这句很关键，解决ajax中文乱码
很多人在使用AJAX过程中，经常都会遇到ajax中文显示变成乱码的问题，其实在ASP+AJAX应用中很容易解决这个问题，只需要在Response.Write语句输出中文内容前加入这行代码，就可以轻松解决ajax中文乱码问题。
继续讲解下段代码，就是显示相应的数据库查询结果，关闭数据库连接：
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("ajaxjiaocheng.mdb"))
set rs = Server.CreateObject("ADODB.recordset")
rs.Open sql, conn
接着要注意的就是这行代码：
Response.CharSet = "GB2312" ‘这句很关键，解决ajax中文乱码
很多人在使用AJAX过程中，经常都会遇到ajax中文显示变成乱码的问题，其实在ASP+AJAX应用中很容易解决这个问题，只需要在Response.Write语句输出中文内容前加入这行代码，就可以轻松解决ajax中文乱码问题。
继续讲解下段代码，就是显示相应的数据库查询结果，关闭数据库连接：
复制代码 代码如下:
if not rs.EOF then
response.write "<li>编号："&rs(0)&"</li>"
response.write "<li>名称："&rs(1)&"</li>"
response.write "<li>点击："&rs(2)&"</li>"
response.write "<li>介绍："&rs(3)&"</li>"
end if
rs.close
set rs = nothing
conn.close
set conn = nothing
第三步：ASP+AJAX+数据库的实例演示及讲解
一路下来，代码非常精简明了。下面我们再附上数据库表的说明如下：
库名:ajaxjiaocheng.mdb
表名: Customers
字段1:CustomerID 自动编号
字段2:Name 文本格式
字段3:NL 数字格式
字段4:Address 文本格式
看到这里，不知道你是否能理解AJAX的工作原理？建议你动手一步步跟着本教程编写代码并进行测试。
本实例直观的说可以这样理解：
通过index.html页面上的<select name="customers" onchange="showCustomer(this.value)"> 下拉列表选择触发JS代码中的showCustomer(this.value)事件，将选中的option值<option value="1">AIDI</option>
由以下的代码传递给ASP文件：
var url="getcustomer.asp?sid=" + Math.random() + "&q=" + str
xmlHttp=GetXmlHttpObject(stateChanged)
xmlHttp.open("GET", url , true)
xmlHttp.send(null)
ASP文件接收到q参数后，输出数据库相应的查询结果，然后js会检查asp的输出状态，如果输出完成后会把结果返回到index.html文件ID为txtHint的标签上。
在网络的世界里，我感觉自己无把不能。
if not rs.EOF then
response.write "<li>编号："&rs(0)&"</li>"
response.write "<li>名称："&rs(1)&"</li>"
response.write "<li>点击："&rs(2)&"</li>"
response.write "<li>介绍："&rs(3)&"</li>"
end if
rs.close
set rs = nothing
conn.close
set conn = nothing
第三步：ASP+AJAX+数据库的实例演示及讲解
一路下来，代码非常精简明了。下面我们再附上数据库表的说明如下：
库名:ajaxjiaocheng.mdb
表名: Customers
字段1:CustomerID 自动编号
字段2:Name 文本格式
字段3:NL 数字格式
字段4:Address 文本格式
看到这里，不知道你是否能理解AJAX的工作原理？建议你动手一步步跟着本教程编写代码并进行测试。
本实例直观的说可以这样理解：
通过index.html页面上的<select name="customers" onchange="showCustomer(this.value)"> 下拉列表选择触发JS代码中的showCustomer(this.value)事件，将选中的option值<option value="1">AIDI</option>
由以下的代码传递给ASP文件：
var url="getcustomer.asp?sid=" + Math.random() + "&q=" + str
xmlHttp=GetXmlHttpObject(stateChanged)
xmlHttp.open("GET", url , true)
xmlHttp.send(null)
ASP文件接收到q参数后，输出数据库相应的查询结果，然后js会检查asp的输出状态，如果输出完成后会把结果返回到index.html文件ID为txtHint的标签上。
在网络的世界里，我感觉自己无把不能。
Copyright·© 2019 侯体宗版权所有·
粤ICP备20027696号
