下面是ajax實作一個簡單的百度搜尋列的功能,當使用者在上面的輸入框中鍵入字元時,會執行函數 "showHint()" 。下文透過ajax實例程式碼給大家介紹的非常詳細,對ajax有興趣的朋友一起看看吧
實習過程中需要用到異步提交功能,於是試著去了解了ajax,瞬間感覺以前學習的真是九牛一毛啊,確實如此,做web應用開發,如果不會jquery和ajax,那真的就是白學了,了解之後我才感覺網上的那些花哨的功能已經都可以實現了。
話不多說,下面有ajax實作一個簡單的百度搜尋列的功能,當使用者在上面的輸入框中鍵入字元時,會執行函數 "showHint()" 。函數由"onkeyup" 事件觸發:
function showHint(str) { var xmlhttp; if (str.length==0) { document.getElementByIdx_x("txtHint").innerHTML=""; return; } if (window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest(); } else { xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementByIdx_x("txtHint").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","gethint.asp?q="+str,true); xmlhttp.send(); }
原始程式碼解釋:
如果輸入框為空(str.length==0),則函數清空txtHint 佔位符的內容,並退出函數。
如果輸入框不為空,showHint() 函數執行以下任務:
建立XMLHttpRequest 物件
當伺服器回應就緒時執行函數
#把請求發送到伺服器上的文件
請注意我們向URL 添加了一個參數q (帶有輸入框的內容)
請求的文件是用php來寫的,當然用什麼都可以,和一般的頁面沒有本質的區別:
<?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,则查找数组中的所有提示 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" // 否则设置为正确的值 if ($hint == "") { $response="no suggestion"; } else { $response=$hint; } //输出响应 echo $response; ?>
聽說去百度面試的時候就是這樣類似的題目,其實了解之後也不過如此嘛。
以上所述是小編給大家介紹的AJax實現類似百度搜尋列的功能 (面試多見),希望對大家有幫助! !
相關推薦:
ajax取得json資料為undefined原因分析_AJAX相關
jquery 實作ajaxfileupload非同步上傳外掛程式教學
以上是AJax實現類似百度搜尋列的功能的詳細內容。更多資訊請關注PHP中文網其他相關文章!