使用Google Ajax Search API

到目前爲止，這個系列只涉及到客戶機Web頁面向服務器端腳本和程序發出請求的情況。這就是大約80%到90%的Ajax應用程序(使用XMLHttpRequest對象的異步Web應用程序)的工作方式。然而，這種方法有很嚴重的侷限性：您將受到自己才智和編程技能的限制，就算不是這樣，最起碼也要受到公司團隊中的程序員的才智和編程技能的限制。

　　有時候，您確實想實現一些功能，但是又不具備實現該目標所需的技術知識，幾乎總能遇到這種情況。也許您不知道某些語法，也許不知道如何找出適當的算法。還有些時候，您手頭上可能沒有用於滿足需求的數據或資源(無論是人力資源還是數據資源)。在這些情況下，也許您會想："唉，要是我能使用其他人的代碼該多好啊!"本文就是要解決這個問題。

　　開放源碼腳本和程序

　　在論述本文的實際內容(在Web應用程序中使用公共API)之前，有必要說一說開放源碼腳本和程序。淺顯地講，開放源碼 是用於描述可以在一定程度上免費在您自己的應用程序中使用和重用的代碼的一個術語。相關鏈接請參閱參考資料。簡言之，您可以獲取別人編寫的開放源碼，然後將其放入自己的環境中，而不必爲之付費，也不會受到(很多)限制。

　　如果使用開放源碼，那麼有時候需要爲應用程序增加額外的文檔，或者將您對開放源碼程序或腳本作出的更改反饋給社區。不管如何使用這種程序，最終結果就是，您可以使用這麼一塊代碼：該代碼是您不必親自編寫的，或者，如果沒有大量的幫助和資源的話，就無法編寫該代碼，而您手頭上並沒有這些資源。諸如Apache之類的項目爲利用他人完成的工作提供了方便--不必擔心，他們還希望您使用他們的作品呢!

　　在線文章和教程

　　如果在IBM developerWorks上發表文章，而又不提及Internet上的文章、教程、白皮書之類的大量參考資料，這無疑很愚蠢。網上有成百上千份教材，您也許可以發現近千篇關於Ajax的文章--在本系列中，我就已經發表了近十篇文章!這些文章大部分都有可用的代碼、例子、下載以及其他各種類型的資源。

　　如果您沒有能力編寫要使用的服務器端程序或腳本，或者找不到所需的開放源碼程序或腳本，那麼可以打開Google網站，試着輸入對要找內容的基本描述。然後再在developerWorks網站上執行相同的操作。您常常可以發現所需的代碼，甚至是整個腳本，並且還有一些有幫助的註釋和關於其工作方式的描述。

　　使用公共API

　　很多時候，您會遇到非技術問題。您不需要幫助也能編寫某個腳本或某段代碼，然而，手頭上卻沒有所需的數據或資源。在這些情況下，即使有了教程或者開放源碼腳本，也還需要更多的東西。例如，考慮在Web頁面上增加一個搜索引擎的情況。這樣做的前提是您已經有了要搜索的數據--但是，如果要搜索您公司或組織以外的數據，那麼該怎麼辦呢?

　　如果不是因爲技術上的原因，而是因爲數據而受到限制，那麼，一個公共API也許可以幫助您解決問題。公共API允許使用其他人的服務器上的程序並使用其他人的數據。通常，API本身只定義如何與該程序交互。例如，通過一個用於Google搜索引擎的公共API可以發出搜索請求，但是實際上是由Google的代碼搜索Google的數據，然後將結果返回給您的程序。您不僅可以利用他人在編寫這些程序方面的技能，還可以利用遠遠超過您自己公司所能支持的數據。

　　使用Google Ajax Search API的準備工作

　　毋庸置疑，Google仍然是在線時代極其重要的應用。上至老奶奶，下至四歲小孩，即使不理解網上的其它東西是怎麼回事，也一定知道Google。Google運行着如此流行、如此有用的搜索引擎，並且致力於提供(幾乎全部)免費的服務，所以毫不奇怪，它能提供可以在您自己的程序中使用的公共API。在本節中，您將完成使用Google API的準備工作，並清楚地瞭解如何與Google進行異步應用程序會話。

　　從Google獲取開發者密鑰

　　本文着重討論Google的Ajax Search API。

　　第一步是單擊Sign up for a Google AJAX Search API key鏈接。這時會進入另一個頁面，在此頁面上可以登記使用這個Google API。您需要接受所有使用條款(我認爲所有條款都沒有惡意)並提供您的應用程序所在Web站點的URL(如圖1所示)。　

　　圖1. 登記使用Google的Ajax Search API

　　閱讀完協議並勾選了複選框之後，輸入URL，單擊Generate API Key，等待一二秒鐘。此時必須登錄Google，或者創建一個帳戶。這是一個相當標準的過程，您應該可以自己完成。完成上述操作後，可以看到一個回覆頁面，其中給出了一個非常長的密鑰，並確認您的URL，甚至還給出一個示例頁面。這個密鑰看上去類似於以下形式：

　　ABQIAAAAjtuhyCXrSHOFSz7zK0f8phSA9fWLQO3TbB2M9BRePlYkXeAu8lHeUgfgRs0eIWUaXg

　　Google的API文檔

　　在開始使用獲得的密鑰之前，要花點時間閱讀一下Google的API文檔(在提供密鑰的頁面的底端有一個鏈接，本文的參考資料中也提供了該鏈接)。即使您通過本文有了很好的初步認識，仍然會發現Google的API文檔是一個很好的參考資料，通過該文檔可能會得到關於如何在您自己特有的應用程序中、站點上使用Google的一些有趣的想法。

　　最簡單的Google搜索Web應用程序

　　爲了看看實際效果，我們以Google提供的示例Web頁面爲例，對它稍做修改，然後看看它會變成什麼樣子。

　　創建搜索框

　　清單1顯示了一個很簡單的Web頁面。將這段代碼輸入到您喜歡使用的編輯器中，保存爲文件，然後將該文件上傳到上個小節中提供給Google的域或URL上。

　　清單1. 一個簡單的Google搜索應用程序的HTML代碼

　　

      < html>
　　< head>

　　< title>My Google AJAX Search API Application

　　< link href="[url]http://www.google.com/uds/css/gsearch.css[/url]"

　　type="text/css" rel="stylesheet" />

　　< script

　　src="[url]http://www.google.com/uds/api?file=uds.js&v=1.0&key[/url]=

　　YOUR KEY HERE

　　"

　　type="text/javascript"> < /script>

　　< script language="Javascript" type="text/javascript">

　　function OnLoad() {

　　// create the Google search control

　　var searchControl = new GSearchControl();

　　// These allow you to customize what appears in the search results

　　var localSearch = new GlocalSearch();

　　searchControl.addSearcher(localSearch);

　　searchControl.addSearcher(new GwebSearch());

　　searchControl.addSearcher(new GvideoSearch());

　　searchControl.addSearcher(new GblogSearch());

　　// Tell Google your location to base searches around

　　localSearch.setCenterPoint("Dallas, TX");

　　// "Draw" the control on the HTML form

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

　　}

　　< /script>

　　< /head>

　　< body onload="OnLoad()">

　　< div id="searchcontrol" />

　　< /body>

　　< /html>
 

注意使用從Google獲得的密鑰替換代碼中的粗體文本。當裝載該頁面時，可以看到類似於圖2的一個頁面。

　　

　　圖2. 最簡單的Google搜索窗體

　　這個頁面看上去很簡單，但實際上那個小小的控件背後是Google的強大搜索能力。

　　運行搜索

　　輸入一個搜索詞並單擊Search，使Google開始工作。很快可以看到一些搜索結果，如圖3所示。

　　

　　圖3. Google的搜索結果

　　添加預搜索頁面

　　顯然，執行一次搜索之後，頁面看上去好多了。視頻、博客和搜索結果使頁面更加美觀。因此，您可能想添加一個預搜索，即您定義的一個搜索詞，當用戶裝載您的頁面時，首先將看到該搜索詞的搜索結果。爲此，可以將清單2中以粗體顯示的那行代碼添加到JavaScript中。

　　清單2. 添加預搜索詞

　　

      function OnLoad() {
　　// create the Google search control

　　var searchControl = new GSearchControl();

　　// These allow you to customize what appears in the search results

　　var localSearch = new GlocalSearch();

　　searchControl.addSearcher(localSearch);

　　searchControl.addSearcher(new GwebSearch());

　　searchControl.addSearcher(new GvideoSearch());

　　searchControl.addSearcher(new GblogSearch());

　　// Tell Google your location to base searches around

　　localSearch.setCenterPoint("Dallas, TX");

　　// "Draw" the control on the HTML form

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

　　searchControl.execute("christmas Eve");

　　}
 
顯然，您可以將自己的初始搜索詞加入代碼中，以定製頁面裝載時所顯示的內容。

　　JavaScript解析

　　在繼續學習之前，簡單看一下這些基本命令的作用。首先，創建一個新的GSearchControl，如清單3所示。以下結構可用於執行所有搜索任務：

　　清單3. 創建新的GSearchControl

　　       function OnLoad() {
　　// create the Google search control

　　var searchControl = new GSearchControl();

　　...

　　}
 
　　接着，代碼使用GlocalSearch設置一個新的本地搜索;這是特殊的Google結構，通過它可以對特定位置執行搜索。這個本地搜索如清單4所示。

　　清單4. 設置新的本地搜索

　　       function OnLoad() {
　　// create the Google search control

　　var searchControl = new GSearchControl();

　　// These allow you to customize what appears in the search results

　　var localSearch = new GlocalSearch();

　　...

　　// Tell Google your location to base searches around

　　localSearch.setCenterPoint("Dallas, TX");

　　...

　　}
 
　　只要知道對象和方法調用，以上代碼無需解釋。清單4中的代碼創建一個新的本地搜索器，然後設置搜索的中心位置。

　　清單5中的這幾行代碼告訴搜索控件應該執行何種類型的搜索。

　　清單5. 允許的搜索類型

　　

      function OnLoad() {
　　// create the Google search control

　　var searchControl = new GSearchControl();

　　// These allow you to customize what appears in the search results

　　var localSearch = new GlocalSearch();

　　searchControl.addSearcher(localSearch);

　　searchControl.addSearcher(new GwebSearch());

　　searchControl.addSearcher(new GvideoSearch());

　　searchControl.addSearcher(new GblogSearch());

　　// Tell Google your location to base searches around

　　localSearch.setCenterPoint("Dallas, TX");

　　...

　　}
 
　其中大部分搜索類型都可以查閱到，以下是一個簡短的總結：

　　·GwebSearch：該對象用於搜索Web，這是Google最著名的一種搜索。

　　·GvideoSearch：該對象查找與搜索詞相關的視頻。

　　·GblogSearch：該對象專門搜索博客，博客的結構和標記與其它Web內容類型有所不同。

　　您已經瞭解如何預先裝載特定的搜索。然後，剩下的只有draw()方法調用了，如清單6所示。您爲該方法調用提供了HTML中的一個DOM元素(如果想回顧關於DOM的內容，請參閱參考資料中本系列的前幾篇文章)。然後，這個控件將魔術般地出現在窗體上，供用戶使用。

　　清單6. 繪製搜索控件

　　       function OnLoad() {
　　// create the Google search control

　　var searchControl = new GSearchControl();

　　// These allow you to customize what appears in the search results

　　var localSearch = new GlocalSearch();

　　searchControl.addSearcher(localSearch);

　　searchControl.addSearcher(new GwebSearch());

　　searchControl.addSearcher(new GvideoSearch());

　　searchControl.addSearcher(new GblogSearch());

　　// Tell Google your location to base searches around

　　localSearch.setCenterPoint("Dallas, TX");

　　// "Draw" the control on the HTML form

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

　　searchControl.execute("christmas Eve");

　　}
 
　　Ajax在哪裏?

　　到目前爲止，還不能明顯看出這個簡單的搜索框中哪裏存在異步性。當然，在Web應用程序中某個地方提供一個Google搜索框確實很棒，但是這畢竟是關於Ajax應用程序的系列文章，而不是關於Google搜索的系列文章。那麼，Ajax到底在哪裏呢?

　　輸入搜索詞並單擊Search按鈕，您將注意到一個非常有Ajax風格的響應：搜索結果直接顯示出來，並沒有頁面重新裝載過程。這正是大多數Ajax應用程序的標誌之一，即無需重新裝載頁面，直接顯示內容更改。顯然，這已經超出了常規請求/響應模型的能力範圍。但是，XMLHttpRequest在哪裏呢?曾經在那麼多文章中風光一時的request對象如今何在?除了那個getElementById()方法，DOM和頁面操作又在哪裏?實際上，這一切都包含在HTML內的兩行代碼中。

　　Google負責處理JavaScript

　　第一行要注意的代碼尚未多加討論，該代碼如清單7所示。

　　清單7. 至關重要的JavaScript文件

　　       < script
　　src="[url]http://www.google.com/uds/api?file=uds.js[/url]

　　&v=1.0&key=

　　[YOUR GOOGLE KEY]"

　　type="text/javascript">
 
　　這裏的語法並不特別值得關注，但要說明的是，Google存放着一個名爲uds.js的文件，該文件包含搜索框運行所需的所有JavaScript。這就是使用他人的代碼的最真實的感覺：甚至可以讓第三方來存放您的應用程序所使用的代碼。這一點非常重要，因爲Google負責維護工作，當Google升級JavaScript文件時，您就能自動受益。Google不會在不通知您的情況下改變API，所以即使JavaScript文件發生了改變，您的代碼仍然可以工作。

　　GSearchControl對象

　　另一項比較隱蔽的操作就是在onLoad()JavaScript函數中創建的GSearchControl對象。要創建這個對象，只需調用清單8中的代碼。

　　清單8. 創建一個GSearchControl對象

　　       // create the Google search control
　　var searchControl = new GSearchControl();
 
　　所需的HTML代碼非常簡單：只需使用一個div標記，以及JavaScript可以引用的一個ID，如清單9所示。

　　清單9. 用於創建搜索控件的HTML代碼

　　       < div id="searchcontrol" />
　　同樣，Google的代碼在幕後處理各種事情。它創建一個新的文本框，一些作爲圖標的圖像，還有一個用於調用某個JavaScript函數的按鈕。所以，您免費獲得了所有行爲。雖然您應該理解其中的基本工作原理，但更方便的是，您可以直接使用該代碼，然後編寫應用程序剩下的部分。

　　Ajax不僅僅是您自己編寫的代碼

　　Ajax應用程序不僅僅是指使用XmlHttpRequest;可以說是一種基於異步方式開發Web應用程序的方法。即使您沒有編寫任何特定於Ajax的代碼，也仍然創建了一個Ajax應用程序。多虧了Google：它做了大部分工作，而您則坐享其成!

　　深度探索Google的Ajax Search API

　　至此，就該由您來完成這些步驟，並應用於您自己的應用程序。最簡單的應用是，將一個div拖入Web頁面，並將清單1中顯示的JavaScript添加到Web頁面中;然後就可以使用Google搜索了。

　　但是，有趣的事情不止於此。不必侷限於這組特定的選項或控件。可以圍繞Web結果、博客結果和視頻結果做文章，合適的話，可以將每種結果集成到 Web應用程序中。例如，可以提供多個搜索控件，每個搜索控件專門用於搜索一種類型的結果。還可以將Google搜索控件包括在一個span元素中，放在其餘的應用程序內容的中間，而不是放在側面的一個div中。不管那種情況，都應該確信，Google的搜索是爲您的需求而打造的，而不應該修改您自己的應用程序來適應Google。

　　結束語

　　以本文學到的知識爲基礎，將Google搜索框和其他Google API應用到您自己的Ajax應用程序中，這應該不難。然而，更重要的是，您應該明白如何使用公共API。例如，Amazon.com 也提供了一個公共API，通過它可以對書籍和Amazon的其它商品執行同樣的Web搜索。您可以着手尋找自己喜歡的公共API，從而超越自己編程技能的限制。實際上，很容易創建一個集成了Google、Amazon.com、Flickr等內容的站點。

　　雖然弄清楚如何使用Google比較重要(因爲Google提供了良好搜索算法和海量的數據存儲)，但更 重要的是學習如何使用任意的公共API。還應該開始轉變觀念，不要再將自己的應用程序看作自我編程技能的總和;相反，它可以是通向各種數據的一個大門。而這些數據可能存儲在Google、Amazon.com、del.icio.us的服務器上或者其他任何地方。在這些數據的基礎上，添加您自己的業務或項目內容，就可以得到非常強大、非常健壯的解決方案，這遠遠超過您自己編寫的作品。

　　所以，把眼光放遠一點，構建大 應用程序。使用來自各種地方的數據，不要限於自己編寫的代碼。享受使用他人代碼的樂趣，在本系列接下來的文章中，我將談到更多技術問題，例如數據格式。