ASP+AJAX+ACCESS數據庫實例講解三個步驟分享
2024-09-01 08:29:12
供稿：網友
看完本篇ajax實例教程，我相信你也可以輕松做出一個初級的AJAX應用。
你也可以直接訪問：//www.49028c.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>層標簽顯示出來。
