ajax學習系列之九: 使用 Google Ajax Search API

最後更新：2018-12-04 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

發出非同步請求並不意味著只是與您自己的伺服器端程式互動。其實也可以與一些公用
API，例如來自 Google 或 Amazon 的 API 進行通訊，從而為 Web
應用程式增加您自己的指令碼和伺服器端程式所不能提供的更多功能。在本文中，Brett McLaughlin 教您如何向公用 API，例如 Google 提供的 API 發出請求並接收其響應。
到目前為止，這個系列只涉及到客戶機 Web 頁面向伺服器端指令碼和程式發出請求的情況。這就是大約 80％到 90％的 Ajax 應用程式（使用XMLHttpRequest 對象的非同步 Web 應用程式）的工作方式。然而，這種方法有很嚴重的局限性：您將受到自己才智和編程技能的限制，就算不是這樣，最起碼也要受到公司團隊中的程式員的才智和編程技能的限制。

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

開放源碼指令碼和程式

在論述本文的實際內容（在 Web 應用程式中使用公用 API）之前，有必要說一說開放源碼指令碼和程式。淺顯地講，開放源碼是用於描述可以在一定程度上免費在您自己的應用程式中使用和重用的代碼的一個術語。簡言之，您可以擷取別人編寫的開放源碼，然後將其放入自己的環境中，而不必為之付費，也不會受到（很多）限制。

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

線上文章和教程

如果在 W3club 上發表文章，而又不提及 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>

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

圖 3. 最簡單的 Google 搜尋表單

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

運行搜尋

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

圖 4. Google 的搜尋結果

添加預搜尋網頁面

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

清單 2. 添加預搜尋字詞

function OnLoad() {
// Create the Google search control
var searchControl = new GSearchControl();

// 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();

// Tell Google your location to base searches around
localSearch.setCenterPoint("Dallas, TX");

...
}

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

1、GwebSearch：該對象用於搜尋 Web，這是 Google 最著名的一種搜尋。
2、GvideoSearch：該對象尋找與搜尋字詞相關的視頻。
3、GblogSearch：該對象專門搜尋部落格，部落格的結構和標記與其它 Web 內容類型有所不同。
您已經瞭解如何預先裝載特定的搜尋。然後，剩下的只有 draw() 方法調用了，如清單 6 所示。您為該方法調用提供了 HTML 中的一個
DOM 元素（如果想回顧關於 DOM 的內容，請參閱參考資料中本系列的前幾篇文章）。然後，這個控制項將魔術般地出現在表單上，供使用者使用。

清單 6. 繪製搜尋控制項

function OnLoad() {
// Create the Google search control
var searchControl = new GSearchControl();

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

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

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More