developerWorks 中国>Web development|XML|Open source>

掌握 Ajax，第 9 部分:使用 Google Ajax Search API

在异步应用程序中使用公共 API

文档选项

		将此页作为电子邮件发送
		将此页作为电子邮件发送

级别：中级

Brett McLaughlin,作家，編輯,O'Reilly Media,Inc

2007 年 3 月 01 日

发出异步请求并不意味着只是与您自己的服务器端程序交互。其实也可以与一些公共 API，例如来自 Google 或 Amazon 的 API 进行通信，从而为 Web 应用程序增加您自己的脚本和服务器端程序所不能提供的更多功能。在本文中，Brett McLaughlin 教您如何向公共 API，例如 Google 提供的 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=<em>
					<span class="boldcode">YOUR KEY HERE</span>
				</em>" 
        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"));

      <span class="boldcode">searchControl.execute("Christmas Eve");</span>
    }

显然，您可以将自己的初始搜索词加入代码中，以定制页面装载时所显示的内容。

JavaScript 解析

在继续学习之前，简单看一下这些基本命令的作用。首先，创建一个新的GSearchControl，如清单 3 所示。以下结构可用于执行所有搜索任务：

清单 3. 创建新的 GSearchControl

				
    function OnLoad() {
      <span class="boldcode">// Create the Google search control
      var searchControl = new GSearchControl();</span>

      ...
    }

接着，代码使用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
      <span class="boldcode">var localSearch = new GlocalSearch();</span>
      ...                             

      // 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
      <span class="boldcode">searchControl.draw(document.getElementById("searchcontrol"));</span>

      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="<span class="boldcode">http://www.google.com/uds/api?file=uds.js</span>
&v=1.0&key=
<em>[YOUR GOOGLE KEY]</em>" 
    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 的服务器上或者其他任何地方。在这些数据的基础上，添加您自己的业务或项目内容，就可以得到非常强大、非常健壮的解决方案，这远远超过您自己编写的作品。

所以，把眼光放远一点，构建大应用程序。使用来自各种地方的数据，不要限于自己编写的代码。享受使用他人代码的乐趣，在本系列接下来的文章中，我将谈到更多技术问题，例如数据格式。

原文链接：https://www.f2er.com/ajax/163952.html

掌握 Ajax，第 9 部分: 使用 Google Ajax Search API

掌握 Ajax，第 9 部分:使用 Google Ajax Search API

猜你在找的Ajax相关文章