AJAX 用於創造動態性更強的應用程式。
以下的範例將為您示範當使用者在輸入方塊中鍵入字元時,網頁如何與web 伺服器進行通訊:請在下方的輸入方塊中鍵入字母(A - Z):
在輸入框中嘗試輸入字母a:
提示訊息:
當使用者在上面的輸入框中鍵入字元時,會執行函數"showHint()" 。此函數由"onkeyup" 事件觸發:
function showHint ( str ) { var xmlhttp ; if ( str . length == 0 ) { 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 ( xmlhttp . readyState == 4 && xmlhttp . status == 200 ) { document . getElementById ( " txtHint " ) . innerHTML = xmlhttp . responseText ; } } xmlhttp . open ( " GET " , " /try/ajax/gethint.php?q= " + str , true ) ; xmlhttp . send ( ) ; }原始碼解析:
如果輸入框為空str.length==0
,則函數清空txtHint佔位符的內容,並退出函數。
如果輸入框不為空, showHint()
函數執行下列任務:
建立XMLHttpRequest對象
當伺服器回應就緒時執行函數
把請求發送到伺服器上的文件
請注意我們為URL 新增了一個參數q (有輸入框的內容)
由上面的JavaScript 呼叫的伺服器頁面是ASP 文件,名為"gethint.asp"。
下面,我們建立了兩個版本的伺服器文件,一個用ASP 寫,另一個用PHP 寫。
"gethint.asp" 中的原始程式碼會檢查一個名字數組,然後傳回瀏覽器對應的名字:
<%response.expires=-1dim a(30)'Fill up array with namesa(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)="Tov e"a(24)="Unni"a(25)="Violet"a(26)="Liza"a(27)="Elizabeth"a(28)="Ellen"a(29)="Wenche" a(30)="Vicky"'get the q parameter from URLq=ucase(request.querystring("q"))'lookup all hints from array if length of q>0if 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 nextend if'Output "no suggestion" if no hint were found'or output the correct valuesif hint="" then response.write("no suggestion")else response.write("no suggestion")else response.write("no suggestion")else response.write("no suggestion")else response。 hint)end if%>
下面的程式碼用PHP 寫,與上面的ASP 程式碼作用是一樣的。
<?php// Fill up array with names$a[]="Anna";$a[]="Brittany";$a[]="Cinderella";$a[]="Diana";$a[]="Eva";$a[] ="Fiona";$a[]="Gunda";$a []="Hege";$a[]="Inga";$a[]="Johanna";$a[]="Kitty";$a[]="Linda";$a[]="Nina ";$a[]="Ophelia";$a[]="Petunia ";$a[]="Amanda";$a[]="Raquel";$a[]="Cindy";$a[]="Doris";$a[]="Eve";$a[ ]="Evita";$a[]="Sunniva";$a[]="To ve";$a[]="Unni";$a[]="Violet";$a[]="Liza";$a[]="Elizabeth";$a[]="Ellen";$a []="Wenche";$a[]="Vicky";//get the q parameter from URL$q=$_GET["q"];//lookup all hints from array if length of q>0if (strlen($q) > 0){ $hint=""; for($i= 0; $i<count($a); $i++) { if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q)))) { if ($hint=="") { $hint=$a[$i]; } else { $hint=$hint." , ".$a[$i]; } } }}// Set output to "no suggestion" if no hint were found// or to the correct valuesif ($hint == ""){ $response="no suggestion";}else{ $response=$hint;}//output the responseecho $response;?>