前言
del.icio.us 提供了多種可重用的數據格式。而它提供了通用 API 訪問和類似 PHP 的輸出格式，使這些數據也可以被 JavaScript 開發者將其作為 JSON 格式所使用。
Google AJAX Search API 提供一些簡單的 web 對象：它們執行建立在各種 Google 服務（頁面搜索、本地搜索、視頻搜索、 Blog 搜索、新聞搜索）之上的內嵌（ inline ）搜索。
如何把這兩項技術結合在一起呢？ 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 應用中嵌入 Google Search 的 JavaScript 代碼庫。當然像其它 Google 開發 API 相同，在使用它之前，你首先需要 注冊一個 API key 。
Google AJAX Search API 提供一些簡單的 web 對象：它們執行建立在各種 Google 服務（頁面搜索、本地搜索、視頻搜索、 Blog 搜索、新聞搜索）之上的內嵌（ inline ）搜索。如果你設計頁面是為了幫助用戶建立內容（比如信息板、 blog 等），而這個 API 可以設計成：通過允許它們直接把搜索結果復制到它們的信息中的方式來支持前面的這些活動。
Google AJAX Search API 是最新發布的，它的特性被廣泛地用戶使用，你可以通過加入 Google AJAX Search API 討論組 來進行反饋和技術討論。
用戶群
最好具有 JavaScript 編程和面向對象編程概念。
介紹
“Hello ， World” 開場白
這是學習 API 的最簡單方式。下面的 web 頁面代碼顯示了對關鍵詞 “VW GTI” 的內嵌搜索結果集合。之所以稱之為集合，因為它包括了本地搜索、頁面搜索、視頻和 Blog 搜索結果。
|
<! 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&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 >
|
你可以下載本例代碼，并進行相應修改，但要注意的一點 : 你必須使用你自己的 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 對象，它控制了一個跨越多種搜索服務的搜索。
可以看到， GlocalSearch 、 GwebSearch 、 GvideoSearch 、 GblogSearch 和 GnewsSearch 類型的對象（后稱搜索者對象）通過 GSearchControl 對象的 addSearcher 方法被添加到了搜索控制（ search control ）中，這些搜索者對象（ searcher objects ）決定了那些搜索服務在搜索控制的操控之下。
通過調用 GSearchControl 的 draw() 方法，使搜索控制顯示在頁面中。此方法也可把搜索控制綁定到頁面的 DOM 中。默認情況下，搜索控制以線性布局 (linear layout) 顯示，你也可以選擇標簽布局 (tabbed layout) 。關于布局的選將在下面講解。
為了使用標簽布局選項，搜索控制允許開發者輕松地把 “search form” 從搜索結果集合中脫離出來。這種做法的用處之一：在頁面的 sidebar 中顯示 search form ，而搜索結果羅列在頁面中央。
用戶通過在搜索控制的文本框中輸入搜索單詞后按下回車按鈕或者點擊搜索按鈕的方式啟動一次搜索。搜索控制將自動進行一次對所要求的各種 Google 搜索服務的并行搜索。你也可以通過把搜索單詞作為參數傳遞給搜索控制的 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 中的參數 v 來聲明所使用的 API 版本（這里的參數 v 聲明的是 1.0 版本）。當 Google 進行 API 升級時，版本號將被升高，并在 Google AJAX Search API 討論組 中發布通知。請注意在版本升級時的任何必需的代碼變化，如果新版本和你的代碼兼容的話，請更新你的 URL 到新的版本。
當然，在新版本發布后， Google 仍然會在一段時間內同時支持新、舊版本，這段時間可能長達一個月。而這段時間過后，使用舊版本 API 的 client 將不再被接受，所以請盡量保持使用新版本。
在某個版本的使用期間， Google AJAX Search API 開發團隊會周期性的更新 API 以達到修正 bug 、提高性能的目的，而這是不會產生新版本的。大多數情況，這些修正對用戶來講是保持透明的，但也存在一些對 client 產生無意識的破壞，請訪問 Google AJAX Search API 討論組 報告這些問題。
示例
注意：這里的示例僅提供了相關的 Javascript 代碼而并非全部的 HTML 文件。你可以將這些代碼插入到 HTML 文件或者通過點擊下載鏈接下載完整的 HTML 文件。
基本功能
下面的代碼建立了一個搜索控制，并配置它用以完成跨越本地搜索、頁面搜索、視頻搜索、 blog 搜索的搜索，然后將搜索控制放置在頁面中。
|
// create a search control
var searchControl = new GSearchControl( null );
// add in a full set of searchers
searchControl.addSearcher( new GlocalSearch());
searchControl.addSearcher( new GwebSearch());
searchControl.addSearcher( new GvideoSearch());
searchControl.addSearcher( new GblogSearch());
searchControl.addSearcher( new GnewsSearch());
// tell the searcher to draw itself and tell it where to attach
// Note that an element must exist within the HTML document with id
"search_control"
searchControl.draw(document.getElementById( "search_control" ));
|
GSearcherControl 繪制（ Draw ）模式
搜索控制可以通過編程選擇不同的繪制模式：線性（ linear ）、標簽（ tabbed ）。 GdrawOptions 對象通過它的 setDrawMode() 方法控制了這種行為。此方法可選擇的參數：
GSearchControl.DRAW_MODE_LINEAR
GSearchControl.DRAW_MODE_TABBED
為了實際設置搜索控制對象的繪制模式，需要把 GdrawOptions 對象作為參數傳送給搜索控制對象的 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” 從搜索結果集合中脫離出來。 GdrawOptions 對象通過 setSearchFormRoot() 方法控制這種行為。此方法接受將作為 search form 容器的 DOM 元素作為參數。
|
// create a drawOptions object
var drawOptions = new GdrawOptions();
drawOptions.setSearchFormRoot(document.getElementById( "searchForm" ));
searchControl.draw(element, drawOptions);
|
搜索者對象（ Searcher Objects ）
搜索控制對象的 addSearcher() 方法決定了搜索控制對象操控哪些搜索服務。此方法需要 2 個參數：一個參數提供服務對象，另一個提供該服務的選項。下面是當前所支持的搜索者對象：
GlocalSearch
GwebSearch
GvideoSearch
GblogSearch
GnewsSearch
隨著 Google AJAX Search API 的進化，將會有更多支持的服務被加進來。
搜索者選項（ GsearcherOptions ）
在單獨添加搜索者給搜索控制時， addSearcher() 方法的第二個可選參數：
GsearcherOptions 對象，它控制每個服務的默認展開模式，后者影響到搜索結果如何顯示在頁面中。展開模式有以下幾種：
GsearchControl.EXPAND_MODE_OPEN ：盡可能地顯示全部的搜索結果。
GSearchControl.EXPAND_MODE_CLOSED ：隱藏搜索結果，除非通過 UI 元素（比如一個箭頭）被打開。
GSearchControl.EXPAND_
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
