快捷導(dǎo)航

ASP+AJAX+ACCESS數(shù)據(jù)庫實(shí)例講解三個(gè)步驟分享

更新時(shí)間：2012年07月08日 21:36:24 作者：

其實(shí)說起AJAX的初級應(yīng)用是非常簡單的，通俗的說就是客戶端(javascript)與服務(wù)端(asp或php等)腳本語言的數(shù)據(jù)交互

看完本篇ajax實(shí)例教程，我相信你也可以輕松做出一個(gè)初級的AJAX應(yīng)用。
你也可以直接訪問：http://chabaoo.cn/codes/57017.html 下載ajax教程的源碼示例。
好，下面我們就始一步步讓你了解AJAX+ASP基礎(chǔ)應(yīng)用，我們將分三步講解，如下。
1. 前臺(tái)AJAX代碼（javascript）的創(chuàng)建。
2. 后臺(tái)服務(wù)端ASP AJAX代碼的編寫。
3. ASP+AJAX+數(shù)據(jù)庫的實(shí)例演示及講解。

第一步：前臺(tái)AJAX代碼（javascript）的創(chuàng)建。
我們先創(chuàng)建一個(gè)index.html前臺(tái)文件，內(nèi)容代碼如下：

復(fù)制代碼代碼如下:

 
<html> 
<head> 
<title>AJAX教程實(shí)例-AJAX教程實(shí)例-ASP+AJAX+ACCESS數(shù)據(jù)庫應(yīng)用-腳本之家原創(chuàng)ajax實(shí)例教程</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">哇塞網(wǎng)</option> 
<option value="3">收音機(jī)</option> 
</select> 
</form><p> 
<div id="txtHint"><b>網(wǎng)站信息...</b></div> 
</p></body> 
</html> 

ajax代碼講解：
關(guān)鍵代碼為JS部分，其原理就是創(chuàng)建一個(gè)客戶的Microsoft.XMLHTTP對象，來完成前臺(tái)數(shù)據(jù)與服務(wù)端ASP的交互。
然后要注意的就是<select name="customers" onchange="showCustomer(this.value)">
這一行代碼，原理就是通過showCustomer(this.value)觸發(fā)AJAX的前臺(tái)腳本對象，將用戶在下拉列表選擇的結(jié)果數(shù)據(jù)通過Microsoft.XMLHTTP發(fā)送到服務(wù)端處理，再返回到前臺(tái)ID為txtHint的<div id="txtHint"><b>用戶信息...</b></div>層標(biāo)簽顯示出來。

第二步：后臺(tái)服務(wù)端ASP AJAX代碼的編寫。
創(chuàng)建完剛才的index.html，我們接著再創(chuàng)建一個(gè)getcustomer.asp文件，請確認(rèn)你的ASP環(huán)境一切OK：）
getcustomer.asp的代碼如下：

復(fù)制代碼代碼如下:

 
<% 
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>點(diǎn)擊："&rs(2)&"</li>" 
response.write "<li>介紹："&rs(3)&"</li>" 
end if 
rs.close 
set rs = nothing 
conn.close 
set conn = nothing 
%> 

ajax代碼講解：
如果有asp基礎(chǔ)的朋友一看就能明白，連接數(shù)據(jù)庫代碼及跟據(jù)前臺(tái)發(fā)送過來的q參數(shù)查詢相應(yīng)的數(shù)據(jù)庫結(jié)果：

復(fù)制代碼代碼如下:

 
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" ‘這句很關(guān)鍵，解決ajax中文亂碼
很多人在使用AJAX過程中，經(jīng)常都會(huì)遇到ajax中文顯示變成亂碼的問題，其實(shí)在ASP+AJAX應(yīng)用中很容易解決這個(gè)問題，只需要在Response.Write語句輸出中文內(nèi)容前加入這行代碼，就可以輕松解決ajax中文亂碼問題。

繼續(xù)講解下段代碼，就是顯示相應(yīng)的數(shù)據(jù)庫查詢結(jié)果，關(guān)閉數(shù)據(jù)庫連接：

復(fù)制代碼代碼如下:

 
if not rs.EOF then 
response.write "<li>編號："&rs(0)&"</li>" 
response.write "<li>名稱："&rs(1)&"</li>" 
response.write "<li>點(diǎn)擊："&rs(2)&"</li>" 
response.write "<li>介紹："&rs(3)&"</li>" 
end if 
rs.close 
set rs = nothing 
conn.close 
set conn = nothing 

第三步：ASP+AJAX+數(shù)據(jù)庫的實(shí)例演示及講解

一路下來，代碼非常精簡明了。下面我們再附上數(shù)據(jù)庫表的說明如下：

庫名:ajaxjiaocheng.mdb
表名: Customers

字段1:CustomerID 自動(dòng)編號
字段2:Name 文本格式
字段3:NL 數(shù)字格式
字段4:Address 文本格式
看到這里，不知道你是否能理解AJAX的工作原理？建議你動(dòng)手一步步跟著本教程編寫代碼并進(jìn)行測試。

本實(shí)例直觀的說可以這樣理解：
通過index.html頁面上的<select name="customers" onchange="showCustomer(this.value)"> 下拉列表選擇觸發(fā)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參數(shù)后，輸出數(shù)據(jù)庫相應(yīng)的查詢結(jié)果，然后js會(huì)檢查asp的輸出狀態(tài)，如果輸出完成后會(huì)把結(jié)果返回到index.html文件ID為txtHint的標(biāo)簽上。
在網(wǎng)絡(luò)的世界里，我感覺自己無把不能。

您可能感興趣的文章: