DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> AJAX入門 >> AJAX基礎知識 >> ASP+AJAX+ACCESS數據庫實例講解三個步驟分享
ASP+AJAX+ACCESS數據庫實例講解三個步驟分享
編輯:AJAX基礎知識      日期:2016/12/24 15:20:34
看完本篇ajax實例教程,我相信你也可以輕松做出一個初級的AJAX應用。
你也可以直接訪問:http://www.jb51.net/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>層標簽顯示出來。

第二步:後台服務端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的標簽上。
在網絡的世界裡,我感覺自己無把不能。
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved