看完本篇ajax實(shí)例教程,我相信你也可以輕松做出一個(gè)初級(jí)的AJAX應(yīng)用。
你也可以直接訪問:https://www.jb51.net/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>請(qǐng)選擇用戶:
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對(duì)象,來完成前臺(tái)數(shù)據(jù)與服務(wù)端ASP的交互。
然后要注意的就是select name="customers" onchange="showCustomer(this.value)">
這一行代碼,原理就是通過showCustomer(this.value)觸發(fā)AJAX的前臺(tái)腳本對(duì)象,將用戶在下拉列表選擇的結(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文件,請(qǐng)確認(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>編號(hào):"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>編號(hào):"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í)例演示及講解
一路下來,代碼非常精簡明了。下面我們?cè)俑缴蠑?shù)據(jù)庫表的說明如下:
庫名:ajaxjiaocheng.mdb
表名: Customers
字段1:CustomerID 自動(dòng)編號(hào)
字段2:Name 文本格式
字段3:NL 數(shù)字格式
字段4:Address 文本格式
看到這里,不知道你是否能理解AJAX的工作原理?建議你動(dòng)手一步步跟著本教程編寫代碼并進(jìn)行測(cè)試。
本實(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ò)的世界里,我感覺自己無把不能。
您可能感興趣的文章:- ajax 數(shù)據(jù)庫中隨機(jī)讀取5條數(shù)據(jù)動(dòng)態(tài)在頁面中刷新
- ajax+asp無限級(jí)分類樹型結(jié)構(gòu)(帶數(shù)據(jù)庫)
- ajax php 實(shí)現(xiàn)寫入數(shù)據(jù)庫
- AJAX自學(xué)練習(xí) 無刷新從數(shù)據(jù)庫后臺(tái)取數(shù)據(jù)顯示
- AJAX 自學(xué)練習(xí) 無刷新提交并修改數(shù)據(jù)庫數(shù)據(jù)并顯示
- 基于asp+ajax和數(shù)據(jù)庫驅(qū)動(dòng)的二級(jí)聯(lián)動(dòng)菜單
- ajax異步刷新實(shí)現(xiàn)更新數(shù)據(jù)庫
- ajax 登錄功能簡單實(shí)現(xiàn)(未連接數(shù)據(jù)庫)
- ajax對(duì)注冊(cè)名進(jìn)行驗(yàn)證檢測(cè)是否存在于數(shù)據(jù)庫中
- ajax讀取數(shù)據(jù)庫內(nèi)容實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)下拉選擇菜單示例
- jquery+ajax+C#實(shí)現(xiàn)無刷新操作數(shù)據(jù)庫數(shù)據(jù)的簡單實(shí)例
- Ajax動(dòng)態(tài)加載數(shù)據(jù)庫示例
- 使用wordpress的$wpdb類讀mysql數(shù)據(jù)庫做ajax時(shí)出現(xiàn)的問題該如何解決