ASP+AJAX+ACCESS数据库实例讲解三个步骤分享
2024-09-01 08:29:12
供稿：网友
看完本篇ajax实例教程，我相信你也可以轻松做出一个初级的AJAX应用。
你也可以直接访问：//www.Vevb.com/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数据库应用-错新站长站原创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">错新站长站.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>层标签显示出来。
