AJAX 鐢ㄤ簬鍒涢犲姩鎬佹ф洿寮虹殑搴旂敤紼嬪簭銆?/span>
AJAX ASP/PHP 瀹炰緥
涓嬮潰鐨勪緥瀛愬皢涓烘?zhèn)ㄦ紨绀哄綋鐢ㄦ埛鍦ㄨ緭鍏ユ涓敭鍏ュ瓧绗︽椨灱尵|戦〉濡備綍涓?web 鏈嶅姟鍣ㄨ繘琛岄氫俊錛?/p>
璇峰湪涓嬮潰鐨勮緭鍏ユ涓敭鍏ュ瓧姣嶏紙A - Z錛夛細(xì)
寤鴻錛?/p>
瀹炰緥瑙ｉ噴 - showHint() 鍑芥暟
褰撶敤鎴峰湪涓婇潰鐨勮緭鍏ユ涓敭鍏ュ瓧絎︽椂錛屼細(xì)鎵ц鍑芥暟 "showHint()" 銆傝鍑芥暟鐢?"onkeyup" 浜嬩歡瑙﹀彂錛?/p>
function showHint(str) { var xmlhttp; if (str.length==0) { document.getElementById("txtHint").innerHTML=""; return; } if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for 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","gethint.asp?q="+str,true); xmlhttp.send(); } 婧愪唬鐮佽В閲婏細(xì)
濡傛灉杈撳叆妗嗕負(fù)絀?(str.length==0)錛屽垯璇ュ嚱鏁版竻絀?txtHint 鍗犱綅絎︾殑鍐呭錛屽茍閫鍑哄嚱鏁般?/p>
濡傛灉杈撳叆妗嗕笉涓虹┖錛宻howHint() 鍑芥暟鎵ц浠ヤ笅浠誨姟錛?/p>
- 鍒涘緩 XMLHttpRequest 瀵硅薄
- 褰撴湇鍔″櫒鍝嶅簲灝辯華鏃舵墽琛屽嚱鏁?/li>
- 鎶婅姹傚彂閫佸埌鏈嶅姟鍣ㄤ笂鐨勬枃浠?/li>
- 璇鋒敞鎰忔垜浠悜 URL 娣誨姞浜嗕竴涓弬鏁?q 錛堝甫鏈夎緭鍏ユ鐨勫唴瀹癸級(jí)
AJAX 鏈嶅姟鍣ㄩ〉闈?- ASP 鍜?PHP
鐢變笂闈㈢殑 JavaScript 璋冪敤鐨勬湇鍔″櫒欏甸潰鏄?ASP 鏂囦歡錛屽悕涓?"gethint.asp"銆?/p>
涓嬮潰錛屾垜浠垱寤轟簡涓や釜鐗堟湰鐨勬湇鍔″櫒鏂囦歡錛屼竴涓敤 ASP 緙栧啓錛屽彟涓涓敤 PHP 緙栧啓銆?/p>
ASP 鏂囦歡
"gethint.asp" 涓殑婧愪唬鐮佷細(xì)媯(gè)鏌ヤ竴涓悕瀛楁暟緇勶紝鐒跺悗鍚戞祻瑙堝櫒榪斿洖鐩稿簲鐨勫悕瀛楋細(xì)
<% 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錛屽垯鏌ユ壘鏁扮粍涓殑鎵鏈夋彁紺?/span> 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 '濡傛灉鏈壘鍒版彁紺猴紝鍒欒緭鍑?"no suggestion" '鍚﹀垯杈撳嚭姝ｇ‘鐨勫?/span> if hint="" then response.write("no suggestion") else response.write(hint) end if %>
PHP 鏂囦歡
涓嬮潰鐨勪唬鐮佺敤 PHP 緙栧啓錛屼笌涓婇潰鐨?ASP 浠ｇ爜浣滅敤鏄竴鏍風(fēng)殑銆?/p>
娉ㄩ噴錛?/span>濡傞渶鍦?PHP 涓繍琛岃繖涓緥瀛愶紝璇峰皢 url 鍙橀噺鐨勫鹼紙Javascript 浠ｇ爜涓級(jí)鐢?"gethint.asp" 鏀逛負(fù) "gethint.php"銆?/p><?php // 鐢ㄥ悕瀛楁潵濉厖鏁扮粍 $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[]="Tove"; $a[]="Unni"; $a[]="Violet"; $a[]="Liza"; $a[]="Elizabeth"; $a[]="Ellen"; $a[]="Wenche"; $a[]="Vicky"; //鑾峰緱鏉ヨ嚜 URL 鐨?q 鍙傛暟 $q=$_GET["q"]; //濡傛灉 q 澶т簬 0錛屽垯鏌ユ壘鏁扮粍涓殑鎵鏈夋彁紺?/span> if (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]; } } } } // 濡傛灉鏈壘鍒版彁紺猴紝鍒欐妸杈撳嚭璁劇疆涓?"no suggestion" // 鍚﹀垯璁劇疆涓烘紜殑鍊?/span> if ($hint == "") { $response="no suggestion"; } else { $response=$hint; } //杈撳嚭鍝嶅簲 echo $response; ?>
]]>
onreadystatechange 浜嬩歡
褰撹姹傝鍙戦佸埌鏈嶅姟鍣ㄦ椂錛屾垜浠渶瑕佹墽琛屼竴浜涘熀浜庡搷搴旂殑浠誨姟銆?/p>
姣忓綋 readyState 鏀瑰彉鏃訛紝灝變細(xì)瑙﹀彂 onreadystatechange 浜嬩歡銆?/p>
readyState 灞炴у瓨鏈?XMLHttpRequest 鐨勭姸鎬佷俊鎭?/p>
涓嬮潰鏄?XMLHttpRequest 瀵硅薄鐨勪笁涓噸瑕佺殑灞炴э細(xì)
| 灞炴?/th> | 鎻忚堪 |
|---|---|
| onreadystatechange | 瀛樺偍鍑芥暟錛堟垨鍑芥暟鍚嶏級(jí)錛屾瘡褰?readyState 灞炴ф敼鍙樻椂錛屽氨浼?xì)璋冪敤璇ュ嚱鏁般?/td> |
| readyState | 瀛樻湁 XMLHttpRequest 鐨勭姸鎬併備粠 0 鍒?4 鍙戠敓鍙樺寲銆?/p>
|
| status | 200: "OK" 404: 鏈壘鍒伴〉闈?/p> |
鍦?onreadystatechange 浜嬩歡涓紝鎴戜滑瑙勫畾褰撴湇鍔″櫒鍝嶅簲宸插仛濂借澶勭悊鐨勫噯澶囨椂鎵鎵ц鐨勪換鍔°?/p>
褰?readyState 絳変簬 4 涓旂姸鎬佷負(fù) 200 鏃訛紝琛ㄧず鍝嶅簲宸插氨緇細(xì)
xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } } 娉ㄩ噴錛?/span>onreadystatechange 浜嬩歡琚Е鍙?5 嬈★紙0 - 4錛夛紝瀵瑰簲鐫 readyState 鐨勬瘡涓彉鍖栥?/p> callback 鍑芥暟鏄竴縐嶄互鍙傛暟褰㈠紡浼犻掔粰鍙︿竴涓嚱鏁扮殑鍑芥暟銆?/p> 濡傛灉鎮(zhèn)ㄧ殑緗戠珯涓婂瓨鍦ㄥ涓?AJAX 浠誨姟錛岄偅涔堟?zhèn)ㄥ簲璇ヤ负鍒涘?XMLHttpRequest 瀵硅薄緙栧啓涓涓?span style="margin: 0px; padding: 0px; border: 0px; font-weight: bold;">鏍囧噯鐨勫嚱鏁幫紝騫朵負(fù)姣忎釜 AJAX 浠誨姟璋冪敤璇ュ嚱鏁般?/p> 璇ュ嚱鏁拌皟鐢ㄥ簲璇ュ寘鍚?URL 浠ュ強(qiáng)鍙戠敓 onreadystatechange 浜嬩歡鏃舵墽琛岀殑浠誨姟錛堟瘡嬈¤皟鐢ㄥ彲鑳戒笉灝界浉鍚岋級(jí)錛?/p>浣跨敤 Callback 鍑芥暟
function myFunction() { loadXMLDoc("ajax_info.txt",function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } }); }
]]>
XMLHttpRequest 鏄?AJAX 鐨勫熀紜銆?/span>
XMLHttpRequest 瀵硅薄
鎵鏈夌幇浠ｆ祻瑙堝櫒鍧囨敮鎸?XMLHttpRequest 瀵硅薄錛圛E5 鍜?IE6 浣跨敤 ActiveXObject錛夈?/p>
XMLHttpRequest 鐢ㄤ簬鍦ㄥ悗鍙頒笌鏈嶅姟鍣ㄤ氦鎹㈡暟鎹傝繖鎰忓懗鐫鍙互鍦ㄤ笉閲嶆柊鍔犺澆鏁翠釜緗戦〉鐨勬儏鍐典笅錛屽緗戦〉鐨勬煇閮ㄥ垎榪涜鏇存柊銆?/p>
鍒涘緩 XMLHttpRequest 瀵硅薄
鎵鏈夌幇浠ｆ祻瑙堝櫒錛圛E7+銆丗irefox銆丆hrome銆丼afari 浠ュ強(qiáng) Opera錛夊潎鍐呭緩 XMLHttpRequest 瀵硅薄銆?/p>
鍒涘緩 XMLHttpRequest 瀵硅薄鐨勮娉曪細(xì)
variable=new XMLHttpRequest();
鑰佺増鏈殑 Internet Explorer 錛圛E5 鍜?IE6錛変嬌鐢?ActiveX 瀵硅薄錛?/h3>variable=new ActiveXObject("Microsoft.XMLHTTP");
涓轟簡搴斿鎵鏈夌殑鐜頒唬嫻忚鍣紝鍖呮嫭 IE5 鍜?IE6錛岃媯(gè)鏌ユ祻瑙堝櫒鏄惁鏀寔 XMLHttpRequest 瀵硅薄銆傚鏋滄敮鎸侊紝鍒欏垱寤?XMLHttpRequest 瀵硅薄銆傚鏋滀笉鏀寔錛屽垯鍒涘緩 ActiveXObject 錛?/p>
var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } 鍦ㄤ笅涓绔犱腑錛屾?zhèn)畣瀛︿範(fàn)鍙戦佹湇鍔″櫒璇鋒眰鐨勭煡璇嗐?/p>
]]>
涓轟簡甯姪鎮(zhèn)ㄧ悊瑙?AJAX 鐨勫伐浣滃師鐞嗭紝鎴戜滑鍒涘緩浜嗕竴涓皬鍨嬬殑 AJAX 搴旂敤紼嬪簭銆?/span>
瀹炰緥
AJAX is not a programming language.
It is just a technique for creating better and more interactive web applications.
AJAX 瀹炰緥瑙ｉ噴
涓婇潰鐨?AJAX 搴旂敤紼嬪簭鍖呭惈涓涓?div 鍜屼竴涓寜閽?/p>
div 閮ㄥ垎鐢ㄤ簬鏄劇ず鏉ヨ嚜鏈嶅姟鍣ㄧ殑淇℃伅銆傚綋鎸夐挳琚偣鍑?yán)L椂錛屽畠璐熻矗璋冪敤鍚嶄負(fù) loadXMLDoc() 鐨勫嚱鏁幫細(xì)
<html> <body> <div id="myDiv"><h3>Let AJAX change this text</h3></div> <button type="button" onclick="loadXMLDoc()">Change Content</button> </body> </html> 鎺ヤ笅鏉ワ紝鍦ㄩ〉闈㈢殑 head 閮ㄥ垎娣誨姞涓涓?<script> 鏍囩銆傝鏍囩涓寘鍚簡榪欎釜 loadXMLDoc() 鍑芥暟錛?/p>
<head> <script type="text/javascript"> function loadXMLDoc() { .... AJAX script goes here ... } </script> </head> 涓嬮潰鐨勭珷鑺備細(xì)涓烘?zhèn)ㄨ瑙?AJAX 鐨勫伐浣滃師鐞嗐?/p>
]]>