首頁 > 開發者 > ASP

ajax+asp實現資料無重新整理儲存查詢代碼

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

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的標籤上。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More