GoogleAPIBook
在取得Google AJAX Search API密鑰後,
我們就可以開始撰寫Google AJAX Search API的應用程式了。
首先來看看我們第一個Google AJAX Search API程式HelloWorld.html的程式碼。

<html>
<head>
<title>My Google AJAX Search API Application</title>
    <!--請在key=之後,輸入自己的Google AJAX Search 密鑰—>
<script src="http://www.google.com/jsapi?key=" type="text/javascript"></script>
<script language="Javascript" type="text/javascript">
google.load("search", "1");
function OnLoad() {
// 建立搜尋控制容器
var searchControl = new google.search.SearchControl();
// 新增搜尋器
// 網頁搜尋
searchControl.addSearcher(new google.search.WebSearch());
//影片搜尋
searchControl.addSearcher(new google.search.VideoSearch());
//部落格搜尋
searchControl.addSearcher(new google.search.BlogSearch());
// 將搜尋結果顯示在網頁中
searchControl.draw(document.getElementById("searchcontrol"));
// 設定預設搜尋項目
searchControl.execute("HelloWorld");
}
google.setOnLoadCallback(OnLoad); //載入頁面時執行OnLoad函式
</script>
</head>
<body>
<div id="searchcontrol">Loading...</div>
</body>
</html>

當我們利用文字編輯器(例如:Windows中的記事本)打好上面的程式碼,
並儲存成HelloWorld.html後,
請用瀏覽器開啟該程式,
就會得到以下的結果。
clip_image002

到底我們的第一個Google AJAX Search API程式是怎麼運作的呢?

首先,
我們必須將我們申請好的Google AJAX Search API密鑰放入程式碼中。
如果我們沒有輸入正確的密鑰,程式將不會正常執行。
<script src="http://www.google.com/jsapi?key="" type="text/javascript">
</script
>

設定好正確密鑰,
接下來我們就必須利用google.load這個函式載入Google AJAX Search API。

google.load("search", "1");

google.load必須帶入兩個引數,
第一個是載入Google API的種類,
由於Google公司有許多的API都可以透過google.load這個函式載入。
因此要載入不同的API就需要帶入不同的代碼,
這裡請填上Google AJAX Search API的代碼search
第二個引數是載入Google API的版本,
由於目前Google AJAX Search API的版本是1,
所以請在這裡填入1

緊接著利用addSearcher這個函式將
網頁搜尋元件google.search.WebSearch()、
影片搜尋元件google.search.VideoSearch()
與部落格搜尋元件google.search.BlogSearch()
加入搜尋控制容器中。
如此一來,
搜尋控制容器就可以針對網頁、影片與部落格進行搜尋了。

searchControl.addSearcher(new google.search.WebSearch());
searchControl.addSearcher(new google.search.VideoSearch());
searchControl.addSearcher(new google.search.BlogSearch());

利用document.getElementById這個函式,
可以幫助我們取得HTML中id為searchcontrol的<div>網頁區塊。
把searchcontrol這個<div>元件傳入draw這個函式中,
就可以將搜尋的結果顯示在searchcontrol這個網頁區塊中。

searchControl.draw(document.getElementById("searchcontrol"));

最後我們必須使用google.setOnLoadCallback這個函式,
讓網頁在瀏覽器中載入時,
可以先去執行OnLoad這個JavaScript函式。

google.setOnLoadCallback(OnLoad);

透過上述的程序,
就可以建立我們的第一個Google AJAX Search API程式。
這個程式能讓我們在網頁上對網頁、影片與部落格進行搜尋。
當然Google AJAX Search API還有許多更有趣的功能可以使用,
筆者將陸續在[Google API]這系列為各位網友繼續介紹。

PS:如果網友對Google API有興趣,
也可以參考我所撰寫的【Google APIs程式工具錦集】一書。




    全站熱搜

    賽拉維‧柯南 發表在 痞客邦 留言(1) 人氣()