ASP+AJAX+ACCESS数据库实例讲解三个步骤分享
- 作者: 双手抠外墙
- 来源: 51数据库
- 2021-08-19
看完本篇ajax实例教程，我相信你也可以轻松做出一个初级的ajax应用。
你也可以直接访问： 下载ajax教程的源码示例。
好，下面我们就始一步步让你了解ajax+asp基础应用，我们将分三步讲解，如下。
1. 前台ajax代码（javascript）的创建。
2. 后台服务端asp ajax代码的编写。
3. asp+ajax+数据库的实例演示及讲解。
第一步：前台ajax代码（javascript）的创建。
我们先创建一个index.html前台文件，内容代码如下：
<html>
<head>
<title>ajax教程实例-ajax教程实例-asp+ajax+access数据库应用-原创ajax实例教程</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</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">.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参数查询相应的数据库结果：
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"></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的标签上。
在网络的世界里，我感觉自己无把不能。
你也可以直接访问： 下载ajax教程的源码示例。
好，下面我们就始一步步让你了解ajax+asp基础应用，我们将分三步讲解，如下。
1. 前台ajax代码（javascript）的创建。
2. 后台服务端asp ajax代码的编写。
3. asp+ajax+数据库的实例演示及讲解。
第一步：前台ajax代码（javascript）的创建。
我们先创建一个index.html前台文件，内容代码如下：
复制代码 代码如下:
<html>
<head>
<title>ajax教程实例-ajax教程实例-asp+ajax+access数据库应用-原创ajax实例教程</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</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">.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参数查询相应的数据库结果：
复制代码 代码如下:
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"></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的标签上。
在网络的世界里，我感觉自己无把不能。
推荐阅读
