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

來源:互聯網
上載者:User

大家在訪問 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下載其源碼。

 

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.