DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> AJAX入門 >> AJAX詳解 >> AJAX案例研究之google suggest
AJAX案例研究之google suggest
編輯:AJAX詳解     

Google Suggest

Google有個Google Suggest的網站。當人們在搜索文本框中輸入所要查詢關鍵詞的時候,Google會自動給出一些關鍵詞的建議。從內容上看,它實際上和百度的相關搜索一樣。不過在界面上卻很不同,百度的相關搜索時羅列搜索結果頁面的下方。

而Google的相關搜索建議確是實時顯示在輸入文本框下,隨著輸入的不同給出的提示也不同。只顯示10條,同時顯示的還有這些關鍵詞搜過結果的數目。

界面的不同帶來的是使用行為的不同。在百度,人們必須先查找一個,然後才能看到與此相關的關鍵詞,這對網站本身來說能夠增加訪問量,可是對用戶來說卻是繁瑣的事情。Google的Suggest就不同了,在搜索以前就得到建議。在此功能的幫助頁面上,Google指出所提示的關鍵詞並不基於浏覽器本地的歷史記錄,而是建立在人們搜索的統計結果的處理上。

AJax實現google suggest

google suggest 比起gmail要好對付的多了,就一個頁面一個腳本文件,代碼都一目了然,在調的時候經常連接被斷掉,最後還是找了一個代理才調通了代碼。可以在本地運行的google suggest

請在這個連接下載:http://www.blogJava.Net/Files/emu/suggest.rar

其中的腳本文件ac.JS已經做了一點整理,關鍵的qc函數crack了一下,使它可以找到服務器:

functionqc(ac){

if(l&&l.readyState!=0){

l.abort()

}

l=vb();

if(l){

l.open("GET","http://www.google.com"+Aa+"&JS=true&qu="+ac,true);

l.onreadystatechange=function(){

if(l.readyState==4&&l.responseText){

if(l.responseText.charAt(0)=="<"){

V--

}else{

eval(l.responseText)

}

}

};

l.send(null)

}

}

插個斷點就可以看到,比如我們在輸入框中輸入了“AJax”,google suggest就向服務器請求這樣一個資源:

http://www.google.com/complete/search?hl=en&JS=true&qu=AJax 而服務器則返回:

sendRPCDone(frameElement,"ajax",newArray("ajax","AJaxamsterdam","
ajaxfc","ajaxontario","ajaxgrips","ajaxfootballclub","AJaxpubliclibrary",
"ajaxfootball","ajaxsoccer","AJaxpickeringtransit"),
newArray("3,840,000results","502,000results",
"710,000results","275,000results","8,860results",
"573,000results","40,500results","454,000results",
"437,000results","10,700results"),newArray(""));

剩下的大家都會做了,不多廢話。

推薦:AJax案例研究之Gmail 

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved