ajax實作類別似百度和google的下拉框原理

大家在訪問 google或百度的時候，假如要搜尋“阿凡達”，我們可能只需要輸入一個  “阿”字，網站就會自動匹配一些片語供我們選擇，這個設計非常人性化。今天我們就此技術簡要介紹，本文假設讀者不清楚ajax技術細節。

 

 

先說說AJAX，我之前也沒有關注過這方面，稍微瞭解了一下，其實它就是一個用戶端指令碼與伺服器動態通訊，在WEB介面不重新整理的情況下就可以進行互動的一個技術。這個技術能帶來非常棒的使用者體驗，將網頁從“表單”提交方式，變成了介面互動方式，使得整個頁面看上去互動性更強大，更方便。

 

ajax 大致流程如下：

 

1用戶端指令碼 - 2觸發事件 - 3訪問伺服器指令碼 - 4通過固定資料格式回傳資料 - 5用戶端動態呈現

這裡4一般通用的資料轉送方式為XML或者jason（輕量級）

 

 

下面就我們實現這個自動匹配輸入框的一些限制作要求：

1.詞彙取自伺服器的一個資料庫。

2.一次取10個詞。

3.詞的匹配為子串匹配。

 

下面看一下相關重要部分的代碼：

 

用戶端javascript

var http_request=false;</p><p>function on_search()<br />{<br />var content = document.getElementById("searchname").value;</p><p>if( content != "" )<br />document.getElementById("searchresult").innerHTML="正在搜尋...";<br />else<br />document.getElementById("searchresult").innerHTML="";</p><p>////////////建立http request//////////////////<br />http_request=false;<br />//開始初始化XMLHttpRequest對象<br />if(window.XMLHttpRequest)//Mozilla瀏覽器<br />{<br />http_request=new XMLHttpRequest();<br />if(http_request.overrideMimeType)<br />{//設定MIME類別<br />http_request.overrideMimeType("text/xml");<br />}<br />}<br />else if(window.ActiveXObject)//IE瀏覽器<br />{<br />try<br />{<br />http_request=new ActiveXObject("Msxml2.XMLHttp");<br />}<br />catch(e)<br />{<br />try<br />{<br />http_request=new ActiveXobject("Microsoft.XMLHttp");<br />}<br />catch(e){}<br />}<br />}<br />//異常，建立對象執行個體失敗<br />if(!http_request)<br />{<br />document.getElementById("searchresult").innerHTML="<font color=red>Fault error:建立XMLHttp對象失敗！</font>";<br />return false;<br />}</p><p>//在URL添加隨機數防止瀏覽器cache頁面<br />var posturl= "Ajax_test.php?keyword=" + encodeURIComponent(content) + "&random=" + Math.random()*(10000);</p><p>http_request.onreadystatechange=showResult;//註冊完成的回呼函數<br />http_request.open("GET",posturl,true);<br />http_request.send(null);</p><p>}</p><p>//顯示結果<br />function showResult()<br />{<br />var html="";</p><p>if(http_request.readyState==4)<br />{<br />if(http_request.status==200)//資訊返回成功<br />{<br />if( !(http_request.responseText) )<br />{<br />document.getElementById("searchresult").innerHTML="";<br />return;<br />}<br />var response = eval( "(" + http_request.responseText + ")" );<br />if( response != null )<br />{<br />if( response.counter < 1 )<br />{<br />document.getElementById("searchresult").innerHTML="";<br />return;<br />}</p><p>/////////< 這裡依具體情況呈現<br />html+='<select name="select_keyword" ondblclick="document.searchform.MovieName.value = document.searchform.select_keyword.value;">';<br />for(var i = 1;i<response.counter;i++)<br />{<br />html += "<option value='";<br />html += response.film[i];<br />html += "'>";<br />html += response.film[i];<br />html += "</option>";<br />}<br />html += "</select>";<br />/////////////</p><p>document.getElementById("searchresult").innerHTML=html;<br />}</p><p>}<br />}<br />} 

 

下面說一下為何要在訪問php指令碼的url後加一個隨機數。（46行，  var posturl= "Ajax_test.php?keyword=" + encodeURIComponent(content) + "&random=" + Math.random()*(10000);）

因為現在瀏覽器很多都具有cache，能把一些URL給緩衝起來，下次訪問的時候不需要與伺服器互動就能呈現頁面。

而我們這裡由於是和伺服器動態通訊的，假如被瀏覽器給緩衝了，可能出現以下情況：

 

使用者輸入 “阿凡達”，伺服器資料庫中沒有該內容，顯示搜尋結果為空白；

這時我們向伺服器資料庫匯入“阿凡達”欄位，再讓使用者輸入“阿凡達”。

這時用戶端卻由於訪問PHP地址已經存在——如xxxx.php?query=阿凡達 ，直接呼叫瀏覽器快取資料，於是搜尋結果還是為空白。

所以我們在URL中加入一個隨機數，防止瀏覽器緩衝。

 

伺服器端指令碼

 <?php<br />require_once('connectdb.php');</p><p>$content=$_GET["keyword"];<br />$content = urldecode( $content );<br />//echo $content;<br />if( $content != "" )<br />{<br />$exec="select * from movie where name LIKE '%".$content."%'";<br />$result = mysql_query($exec);<br />$response->counter = 0;</p><p>while($rs=mysql_fetch_object($result)){<br />$response->counter++;<br />$response->film[$response->counter] = $rs->name;</p><p>if( $response->counter > 10 )<br />break;//MAX TO SELECT<br />}</p><p>echo json_encode($response);<br />}<br />?>

 

這樣資料就可以傳回到web介面了，具體怎麼樣處理，就可以天馬行空了~

 

推薦一個比較好用的已經封裝好的auto complete text——Autocomplete-jQuery ajax，其採用php 、mysql 、javascript

 

有興趣的可以訪問http://www.open-open.com/ajax/ajax20080314223803.htm下載其源碼。