AJAX Suggest執行個體

AJAX Suggest執行個體

在下面的 AJAX 例子中，我們會示範當使用者向一個標準的 HTML 表單中輸入資料時網頁如何與 網頁伺服器進行通訊。 在下面的文字框中輸入名字： First Name：

Suggestions：Anna , Amanda 例子解釋 - HTML表單

表單的 HTML 程式碼： <form> First Name:<input type="text" id="txt1" onkeyup="showHint(this.value)" />

Suggestions: <span id="txtHint">

正如您看到的，這是一個簡單的帶有名為 "txt1" 輸入欄位的 HTML 表單。輸入欄位的事件屬性定義了一個由 onkeyup 事件觸發的函數。

表單下面的段落包含了一個名為 "txtHint" 的 span，這個 span 充當了由 網頁伺服器所取回的資料的位置預留位置。

當使用者輸入資料時，名為 "showHint()" 的函數就會被執行。函數的執行是由 "onkeyup" 事件觸發的。另外需要說明的是，當使用者在文本域中輸入資料時把手指從鍵盤按鍵上移開時，函數 showHint 就會被調用。 例子解釋 - showHint() 函數

showHint() 函數是一個位於 HTML 頁面 head 部分的很簡單的 JavaScript 函數。

此函數包含以下代碼： function showHint(str) { if (str.length==0) { document.getElementById("txtHint").innerHTML=""; return; } xmlHttp=GetXmlHttpObject() if (xmlHttp==null) { alert ("您的瀏覽器不支援AJAX。"); return; } var url="gethint.asp"; url=url+"?q="+str; url=url+"&sid="+Math.random(); xmlHttp.onreadystatechange=stateChanged; xmlHttp.open("GET",url,true); xmlHttp.send(null); }

每當有字元輸入文字框時，此函數就會執行。

假如文本域中存在某些輸入，函數就會執行： 定義回傳資料的伺服器的 url（檔案名稱） 使用文字框的內容向 url 添加參數（q） 添加一個隨機的數字，以防止伺服器使用某個已緩衝的檔案 建立一個 XMLHTTP 對象，並告知此對象當某個改變被觸發時執行名為 stateChanged 的函數 向伺服器發送一個 HTTP 要求 如果輸入欄位為空白，此函數僅僅會清空 txtHint 預留位置的內容 例子解釋 - GetXmlHttpObject() 函數

上面的例子可調用名為 GetXmlHttpObject() 的函數。

此函數的作用是解決為不同瀏覽器建立不同的 XMLHTTP 對象的問題。

這是此函數的代碼： function GetXmlHttpObject() { var xmlHttp=null; try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e) { // Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } } return xmlHttp; } 例子解釋 - stateChanged() 函數

stateChanged() 函數包含下面的代碼： function stateChanged() { if (xmlHttp.readyState==4) { document.getElementById("txtHint").innerHTML=xmlHttp.responseText; } }

每當 XMLHTTP 對象的狀態發生改變時，stateChanged() 函數就會執行。

當狀態變更為 4（“完成”）時，txtHint 預留位置的內容就被響應文本來填充。 AJAX JavaScript

這是 JavaScript 代碼，儲存在檔案 "clienthint.js" 中： var xmlHttp function showHint(str) { if (str.length==0) { document.getElementById("txtHint").innerHTML=""; return; } xmlHttp=GetXmlHttpObject() if (xmlHttp==null) { alert ("您的瀏覽器不支援AJAX。"); return; } var url="gethint.asp"; url=url+"?q="+str; url=url+"&sid="+Math.random(); xmlHttp.onreadystatechange=stateChanged; xmlHttp.open("GET",url,true); xmlHttp.send(null); } function stateChanged() { if (xmlHttp.readyState==4) { document.getElementById("txtHint").innerHTML=xmlHttp.responseText; } } function GetXmlHttpObject() { var xmlHttp=null; try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e) { // Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } } return xmlHttp; } AJAX 伺服器頁面 - ASP 和 PHP

其實不存在什麼“AJAX 伺服器”。AJAX 頁面可以由任一網際網路伺服器提供服務。

在上一節的例子中被 JavaScript 調用的伺服器頁面是一個簡單的名為 "gethint.asp" 的 ASP 檔案。

下面我們列出了這個伺服器頁面代碼的執行個體，使用 ASP 來編寫。 AJAX ASP 執行個體

"gethint.asp" 頁面中的代碼針對 IIS 使用 VBScript 編寫。它會檢查一個名字數組，然後向用戶端返回相應的名字： <% 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，則尋找所有的hint 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 '如果找不到hint，則輸出"no suggestion" '或者輸出正確的值 if hint="" then response.write("no suggestion") else response.write(hint) end if %>