第 9 部分: 使用 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。通過訪問 Google Ajax Search API 主頁（如圖 1 所示），可以找到關於這個 API 的更多信息。（該主頁的鏈接見參考資料。）

圖 1. Google 的 Ajax Search API 頁面

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

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

應該使用什麼 URL？

Google 要求提供的 URL 大致就是站點所在的域。如果有自己的域，就像我一樣，那麼可以使用 http://www.newinstance.com（當然，要用您自己的域替換我的域）。只有當站點使用一個子域，或者一個較大域中的某個特定路徑時，才需要指定更詳細的 URL。在這種情況下，可能需要使用形如 http://www.earthlink.net/~bmclaugh 或 http://brett.earthlink.net 這樣的 URL。但是，除了以上的特殊情況外，不要向 Google 提供過於詳細的 URL -- 只需提供用於訪問整個 Web 站點的根 URL，就可以在該 URL 內隨處使用這個 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</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&key=
					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 獲得的密鑰替換代碼中的粗體文本。當裝載該頁面時，可以看到類似於圖 3 的一個頁面。

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

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

運行搜索

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

圖 4. 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="http://www.google.com/uds/api?file=uds.js&v=1.0&key=[YOUR GOOGLE KEY]" 
    type="text/javascript"> </script>

這裏的語法並不特別值得關注，但要說明的是，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 是什麼樣子？

Google 的 JavaScript 並不太容易理解。首先，uds.js JavaScript 文件找到一些本地設置，處理一些 Google 特有的任務，驗證您的 Google 密鑰，然後裝載另外兩個腳本：http://www.google.com/uds/js/locale/en/uistrings.js 和 http://www.google.com/uds/js/uds_compiled.js。如果有興趣的話，您可以找出並仔細理解這兩個文件，但是要注意：完全理解先進的代碼是很困難的，而且其格式令人生畏！對於大部分人來說，只需知道如何使用這些文件，而不必理解其中每一行的意義。

同樣，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 的服務器上或者其他任何地方。在這些數據的基礎上，添加您自己的業務或項目內容，就可以得到非常強大、非常健壯的解決方案，這遠遠超過您自己編寫的作品。

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

第 9 部分: 使用 Google Ajax Search API

應該使用什麼 URL？

Google 的 JavaScript 是什麼樣子？

第 1 部分: Ajax 入門簡介

第 2 部分: 使用 JavaScript 和 Ajax 發出異步請求

遊戲開發網站

java中的反射

第 9 部分: 使用 Google Ajax Search API

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結