ASP AJAX
AJAX 是指在不重新載入整個頁面的情況下更新網頁的一部分。
什麼是 AJAX？
AJAX = Asynchronous JavaScript and XML（非同步 JavaScript 和 XML）。
AJAX 是一種建立快速動態網頁的技術。
AJAX 允許透過在後臺交換少量資料與伺服器進行通訊，從而非同步更新網頁。這意味著可以在不重新載入整個頁面的情況下更新網頁的一部分。
傳統的網頁（不使用 AJAX）如果內容需要更改，則必須重新載入整個頁面。
使用 AJAX 的應用程式示例：Google Maps、Gmail、Youtube 和 Facebook 標籤頁。
AJAX 如何工作
AJAX 基於 Internet 標準
AJAX 基於 Internet 標準，它結合使用了
- XMLHttpRequest 物件（用於與伺服器非同步交換資料）
- JavaScript/DOM（用於顯示/互動資訊）
- CSS（用於樣式化資料）
- XML（通常用作資料傳輸格式）
AJAX 應用程式是瀏覽器和平臺無關的！
Google Suggest
AJAX 在 2005 年由 Google 推廣，透過 Google Suggest。
Google Suggest 使用 AJAX 建立了一個非常動態的 Web 介面：當您開始在 Google 的搜尋框中輸入時，JavaScript 會將字母傳送到伺服器，伺服器會返回一個建議列表。
立即開始使用 AJAX
在我們的 ASP 教程中，我們將演示 AJAX 如何在不重新載入整個頁面的情況下更新網頁的一部分。伺服器指令碼將用 ASP 編寫。
如果您想了解更多關於 AJAX 的資訊，請訪問我們的AJAX 教程。
AJAX ASP 示例
以下示例將演示當用戶在輸入欄位中鍵入字元時，網頁如何與 Web 伺服器進行通訊。
示例
在下面的輸入欄位中開始輸入姓名
建議：
示例解釋
在上面的示例中，當用戶在輸入欄位中鍵入一個字元時，會執行一個名為 "showHint()" 的函式。
該函式由 onkeyup 事件觸發。
這是 HTML 程式碼
示例
<html>
<head>
<script>
function showHint(str) {
if (str.length == 0) {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("txtHint").innerHTML = this.responseText;
}
};
xmlhttp.open("GET", "gethint.asp?q=" + str, true);
xmlhttp.send();
}
}
</script>
</head>
<body>
<p><b>在下面的輸入框中輸入姓名：</b></p>
<form>
名: <input type="text" onkeyup="showHint(this.value)">
</form>
<p>建議： <span id="txtHint"></span></p>
</body>
</html>
自己動手試一試 »
程式碼解釋
首先，檢查輸入欄位是否為空（str.length == 0）。如果是，則清除 txtHint 佔位符的內容並退出函式。
但是，如果輸入欄位不為空，則執行以下操作：
- 建立一個 XMLHttpRequest 物件
- 建立伺服器響應準備好時要執行的函式
- 將請求傳送到伺服器上的 ASP 檔案 (gethint.asp)
- 注意，q 引數被新增到 gethint.asp?q="+str
- str 變數儲存著輸入欄位的內容
ASP 檔案 - "gethint.asp"
ASP 檔案檢查名稱陣列，並將相應的名稱返回給瀏覽器
<%
response.expires=-1
dim a(30)
'填充陣列名稱
a(1)="Anna"
a(2)="Brittany"
a(3)="Cinderella"
a(4)="Diana"
a(5)="Eva"
a(6)="Fiona"
a(7)="Gunda"
a(8)="Hege"
a(9)="Inga"
a(10)="Johanna"
a(11)="Kitty"
a(12)="Linda"
a(13)="Nina"
a(14)="Ophelia"
a(15)="Petunia"
a(16)="Amanda"
a(17)="Raquel"
a(18)="Cindy"
a(19)="Doris"
a(20)="Eve"
a(21)="Evita"
a(22)="Sunniva"
a(23)="Tove"
a(24)="Unni"
a(25)="Violet"
a(26)="Liza"
a(27)="Elizabeth"
a(28)="Ellen"
a(29)="Wenche"
a(30)="Vicky"
'從 URL 獲取 q 引數
q=ucase(request.querystring("q"))
'如果 q 的長度大於 0，則從陣列查詢所有提示
if len(q)>0 then
hint=""
for i=1 to 30
if q=ucase(mid(a(i),1,len(q))) then
if hint="" then
hint=a(i)
else
hint=hint & " , " & a(i)
end if
end if
next
end if
'如果沒有找到提示，則輸出“無建議”
'或者輸出正確的值
if hint="" then
response.write("no suggestion")
else
response.write(hint)
end if
%>
AJAX 可用於與資料庫進行互動式通訊。
AJAX 資料庫示例
下面的示例將演示網頁如何使用 AJAX 從資料庫中獲取資訊。
示例說明 - HTML 頁面
當用戶在上面的下拉列表中選擇一個客戶時，會執行一個名為 "showCustomer()" 的函式。該函式由 "onchange" 事件觸發
<!DOCTYPE html>
<html>
<head>
<script>
function showCustomer(str)
{
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// IE7+、Firefox、Chrome、Opera、Safari 的程式碼
xmlhttp=new XMLHttpRequest();
}
else
{// IE6、IE5 的程式碼
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (this.readyState==4 && this.status==200)
{
document.getElementById("txtHint").innerHTML=this.responseText;
}
}
xmlhttp.open("GET","getcustomer.asp?q="+str,true);
xmlhttp.send();
}
</script>
</head
<body>
<form>
<select name="customers" onchange="showCustomer(this.value)">
<option value="">選擇一個客戶：</option>
<option value="ALFKI">Alfreds Futterkiste</option>
<option value="NORTS ">North/South</option>
<option value="WOLZA">Wolski Zajazd</option>
</select>
</form>
<
<div id="txtHint">客戶資訊將在此處列出...</div>
</body>
</html>
原始碼解釋
如果沒有選擇客戶（str.length==0），則函式清除 txtHint 佔位符的內容並退出函式。
如果選擇了一個客戶，則 showCustomer() 函式執行以下操作
- 建立一個 XMLHttpRequest 物件
- 建立伺服器響應準備好時要執行的函式
- 將請求傳送到伺服器上的檔案
- 請注意，一個引數 (q) 被新增到了 URL 中（其值為下拉列表的內容）。
ASP 檔案
JavaScript 以上呼叫的伺服器頁面是一個名為 "getcustomer.asp" 的 ASP 檔案。
getcustomer.asp 中的原始碼對資料庫執行查詢，並將結果以 HTML 表格返回
<%
response.expires=-1
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("/datafolder/northwind.mdb"))
set rs=Server.CreateObject("ADODB.recordset")
rs.Open sql,conn
response.write("<table>")
do until rs.EOF
for each x in rs.Fields
response.write("<tr><td><b>" & x.name & "</b></td>")
response.write("<td>" & x.value & "</td></tr>")
next
rs.MoveNext
迴圈
response.write("</table>")
%>
