前言

del.icio.us 提供了多種可重用的數(shù)據(jù)格式。而它提供了通用 API 訪問和類似 PHP 的輸出格式，使這些數(shù)據(jù)也可以被 JavaScript 開發(fā)者將其作為 JSON 格式所使用。

Google AJAX Search API 提供一些簡單的 web 對象：它們執(zhí)行建立在各種 Google 服務(wù)（頁面搜索、本地搜索、視頻搜索、 Blog 搜索、新聞搜索）之上的內(nèi)嵌（ inline ）搜索。

如何把這兩項技術(shù)結(jié)合在一起呢？ Google AJAX Search API+TAG= 美味的站點？

什么是 Google AJAX Search API ？

<shapetype id="_x0000_t75" stroked="f" filled="f" path="m@4@5l@4@11@9@11@9@5xe" o:preferrelative="t" o:spt="75" coordsize="21600,21600"><stroke joinstyle="miter"></stroke><formulas><f eqn="if lineDrawn pixelLineWidth 0"></f><f eqn="sum @0 1 0"></f><f eqn="sum 0 0 @1"></f><f eqn="prod @2 1 2"></f><f eqn="prod @3 21600 pixelWidth"></f><f eqn="prod @3 21600 pixelHeight"></f><f eqn="sum @0 0 1"></f><f eqn="prod @6 1 2"></f><f eqn="prod @7 21600 pixelWidth"></f><f eqn="sum @8 21600 0"></f><f eqn="prod @7 21600 pixelHeight"></f><f eqn="sum @10 21600 0"></f></formulas><path o:connecttype="rect" gradientshapeok="t" o:extrusionok="f"></path><lock aspectratio="t" v:ext="edit"></lock></shapetype><shape id="_x0000_i1025" style="WIDTH: 147pt; HEIGHT: 165.75pt" type="#_x0000_t75"><imagedata o:title="" src="file:///C:%5CDOCUME~1%5CWast%5CLOCALS~1%5CTemp%5Cmsohtml1%5C01%5Cclip_image003.png"></imagedata></shape>

圖 -1 這就是 Google AJAX Search API?

Google AJAX Search API 是提供在頁面和 web 應(yīng)用中嵌入 Google Search 的 JavaScript 代碼庫。當(dāng)然像其它 Google 開發(fā) API 相同，在使用它之前，你首先需要 注冊一個 API key 。

Google AJAX Search API 提供一些簡單的 web 對象：它們執(zhí)行建立在各種 Google 服務(wù)（頁面搜索、本地搜索、視頻搜索、 Blog 搜索、新聞搜索）之上的內(nèi)嵌（ inline ）搜索。如果你設(shè)計頁面是為了幫助用戶建立內(nèi)容（比如信息板、 blog 等），而這個 API 可以設(shè)計成：通過允許它們直接把搜索結(jié)果復(fù)制到它們的信息中的方式來支持前面的這些活動。

Google AJAX Search API 是最新發(fā)布的，它的特性被廣泛地用戶使用，你可以通過加入 Google AJAX Search API 討論組 來進行反饋和技術(shù)討論。

用戶群

最好具有 JavaScript 編程和面向?qū)ο缶幊谈拍睢?

介紹

“Hello ， World” 開場白

這是學(xué)習(xí) API 的最簡單方式。下面的 web 頁面代碼顯示了對關(guān)鍵詞 “VW GTI” 的內(nèi)嵌搜索結(jié)果集合。之所以稱之為集合，因為它包括了本地搜索、頁面搜索、視頻和 Blog 搜索結(jié)果。

<! DOCTYPE html PUBLIC "-//W<chmetcnv unitname="C" sourcevalue="3" hasspace="False" negative="False" numbertype="1" tcsc="0" w:st="on">3C</chmetcnv>//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" > < html xmlns = "http://www.w3.org/1999/xhtml" > < head > < meta http-equiv = "content-type" content = "text/html; charset=utf-8" /> < title > Hello World - Google AJAX Search API Sample </ title > < link href = "http://www.google.com/uds/css/gsearch.css" type = "text/css" rel = "stylesheet" /> < script src = "http://www.google.com/uds/api?file=uds.js&amp;v=1.0" type = "text/javascript" ></ script > < script language = "Javascript" type = "text/javascript" > //<![CDATA[ function OnLoad() { // Create a search control var searchControl = new GSearchControl(); // Add in a full set of searchers var localSearch = new GlocalSearch(); searchControl.addSearcher(localSearch); searchControl.addSearcher( new GwebSearch()); searchControl.addSearcher( new GvideoSearch()); searchControl.addSearcher( new GblogSearch()); searchControl.addSearcher( new GnewsSearch()); // Set the Local Search center point localSearch.setCenterPoint( "<place w:st="on"><city w:st="on">New York</city>, <state w:st="on">NY</state></place>" ); // tell the searcher to draw itself and tell it where to attach searchControl.draw(document.getElementById( "searchcontrol" )); // execute an inital search searchControl.execute( "VW GTI" ); } //]]> </ script > </ head > < body onload = "OnLoad()" > < div id = "searchcontrol" /> </ body > </ html >

你可以下載本例代碼，并進行相應(yīng)修改，但要注意的一點 : 你必須使用你自己的 API key 替換掉原代碼中的 API key 。

上面代碼中包含的 Google AJAX Search API javascript 庫：

http://www.google.com/uds/api?file=uds.js&v=1.0&key=ABCDEFG ，此庫囊括了 Google Search API 所用到的對象和符號。

代碼中的主角是 GSearchControl 對象，它控制了一個跨越多種搜索服務(wù)的搜索。

可以看到， GlocalSearch 、 GwebSearch 、 GvideoSearch 、 GblogSearch 和 GnewsSearch 類型的對象（后稱搜索者對象）通過 GSearchControl 對象的 addSearcher 方法被添加到了搜索控制（ search control ）中，這些搜索者對象（ searcher objects ）決定了那些搜索服務(wù)在搜索控制的操控之下。

通過調(diào)用 GSearchControl 的 draw() 方法，使搜索控制顯示在頁面中。此方法也可把搜索控制綁定到頁面的 DOM 中。默認情況下，搜索控制以線性布局 (linear layout) 顯示，你也可以選擇標(biāo)簽布局 (tabbed layout) 。關(guān)于布局的選將在下面講解。

為了使用標(biāo)簽布局選項，搜索控制允許開發(fā)者輕松地把 “search form” 從搜索結(jié)果集合中脫離出來。這種做法的用處之一：在頁面的 sidebar 中顯示 search form ，而搜索結(jié)果羅列在頁面中央。

用戶通過在搜索控制的文本框中輸入搜索單詞后按下回車按鈕或者點擊搜索按鈕的方式啟動一次搜索。搜索控制將自動進行一次對所要求的各種 Google 搜索服務(wù)的并行搜索。你也可以通過把搜索單詞作為參數(shù)傳遞給搜索控制的 execute() 方法來以編程的方式啟動搜索。

瀏覽器兼容性

<shape id="_x0000_i1026" style="WIDTH: 232.5pt; HEIGHT: 284.25pt" type="#_x0000_t75"><imagedata o:title="" src="file:///C:%5CDOCUME~1%5CWast%5CLOCALS~1%5CTemp%5Cmsohtml1%5C01%5Cclip_image005.png"></imagedata></shape>

圖 -2 租用哪種瀏覽器去沖浪？

Google AJAX Search API 目前支持 Firefox 1.5 以上 ,IE 6,Safari,Opera 9 以上。

API 升級問題

通過在 URL ： http://www.google.com/uds/api?file=uds.js&v=1.0 中的參數(shù) v 來聲明所使用的 API 版本（這里的參數(shù) v 聲明的是 1.0 版本）。當(dāng) Google 進行 API 升級時，版本號將被升高，并在 Google AJAX Search API 討論組 中發(fā)布通知。請注意在版本升級時的任何必需的代碼變化，如果新版本和你的代碼兼容的話，請更新你的 URL 到新的版本。

當(dāng)然，在新版本發(fā)布后， Google 仍然會在一段時間內(nèi)同時支持新、舊版本，這段時間可能長達一個月。而這段時間過后，使用舊版本 API 的 client 將不再被接受，所以請盡量保持使用新版本。

在某個版本的使用期間， Google AJAX Search API 開發(fā)團隊會周期性的更新 API 以達到修正 bug 、提高性能的目的，而這是不會產(chǎn)生新版本的。大多數(shù)情況，這些修正對用戶來講是保持透明的，但也存在一些對 client 產(chǎn)生無意識的破壞，請訪問 Google AJAX Search API 討論組 報告這些問題。

示例

注意：這里的示例僅提供了相關(guān)的 Javascript 代碼而并非全部的 HTML 文件。你可以將這些代碼插入到 HTML 文件或者通過點擊下載鏈接下載完整的 HTML 文件。

基本功能

下面的代碼建立了一個搜索控制，并配置它用以完成跨越本地搜索、頁面搜索、視頻搜索、 blog 搜索的搜索，然后將搜索控制放置在頁面中。

GSearcherControl 繪制（ Draw ）模式

搜索控制可以通過編程選擇不同的繪制模式：線性（ linear ）、標(biāo)簽（ tabbed ）。 GdrawOptions 對象通過它的 setDrawMode() 方法控制了這種行為。此方法可選擇的參數(shù)：

GSearchControl.DRAW_MODE_LINEAR

GSearchControl.DRAW_MODE_TABBED

為了實際設(shè)置搜索控制對象的繪制模式，需要把 GdrawOptions 對象作為參數(shù)傳送給搜索控制對象的 draw 方法。

// create a drawOptions object var drawOptions = new GdrawOptions(); // tell the searcher to draw itself in linear mode drawOptions.setDrawMode(GSearchControl.DRAW_MODE_LINEAR); searchControl.draw(element, drawOptions); // tell the searcher to draw itself in tabbed mode drawOptions.setDrawMode(GSearchControl.DRAW_MODE_TABBED); searchControl.draw(element, drawOptions);

此方法的另一種常見的選項能將 “search form” 從搜索結(jié)果集合中脫離出來。 GdrawOptions 對象通過 setSearchFormRoot() 方法控制這種行為。此方法接受將作為 search form 容器的 DOM 元素作為參數(shù)。

// create a drawOptions object var drawOptions = new GdrawOptions(); drawOptions.setSearchFormRoot(document.getElementById( "searchForm" )); searchControl.draw(element, drawOptions);

搜索者對象（ Searcher Objects ）

搜索控制對象的 addSearcher() 方法決定了搜索控制對象操控哪些搜索服務(wù)。此方法需要 2 個參數(shù)：一個參數(shù)提供服務(wù)對象，另一個提供該服務(wù)的選項。下面是當(dāng)前所支持的搜索者對象：

GlocalSearch

GwebSearch

GvideoSearch

GblogSearch

GnewsSearch

隨著 Google AJAX Search API 的進化，將會有更多支持的服務(wù)被加進來。

搜索者選項（ GsearcherOptions ）

在單獨添加搜索者給搜索控制時， addSearcher() 方法的第二個可選參數(shù)：

GsearcherOptions 對象，它控制每個服務(wù)的默認展開模式，后者影響到搜索結(jié)果如何顯示在頁面中。展開模式有以下幾種：

GsearchControl.EXPAND_MODE_OPEN ：盡可能地顯示全部的搜索結(jié)果。

GSearchControl.EXPAND_MODE_CLOSED ：隱藏搜索結(jié)果，除非通過 UI 元素（比如一個箭頭）被打開。

GSearchControl.EXPAND_

Google AJAX Search API+TAG=美味的站點