【 tulaoshi.com - Web开发 】
发出异步请求并不意味着只是与您自己的服务器端程序交互。其实也可以与一些公共 API，例如来自 Google 或 Amazon 的 API 进行通信，从而为 Web 应用程序增加您自己的脚本和服务器端程序所不能提供的更多功能。在本文中，Brett McLaughlin 教您如何向公共 API，例如 Google 提供的 API 发出请求并接收其响应。
到目前为止，这个系列只涉及到客户机 Web 页面向服务器端脚本和程序发出请求的情况。这就是大约 80% 到 90% 的 Ajax 应用程序(使用 XMLHttpRequest 对象的异步 Web 应用程序)的工作方式。然而，这种方法有很严重的局限性：您将受到自己才智和编程技能的限制，就算不是这样，最起码也要受到公司团队中的程序员的才智和编程技能的限制。
有时候，您确实想实现一些功能，但是又不具备实现该目标所需的技术知识，几乎总能遇到这种情况。也许您不知道某些语法，也许不知道如何找出适当的算法。还有些时候，您手头上可能没有用于满足需求的数据或资源(无论是人力资源还是数据资源)。在这些情况下，也许您会想："唉，要是我能使用其他人的代码该多好啊!"本文就是要解决这个问题。
在论述本文的实际内容(在 Web 应用程序中使用公共 API)之前，有必要说一说开放源码脚本和程序。浅显地讲，开放源码 是用于描述可以在一定程度上免费在您自己的应用程序中使用和重用的代码的一个术语。相关链接请参阅 参考资料。简言之，您可以获取别人编写的开放源码，然后将其放入自己的环境中，而不必为之付费，也不会受到(很多)限制。
如果使用开放源码，那么有时候需要为应用程序增加额外的文档，或者将您对开放源码程序或脚本作出的更改反馈给社区。不管如何使用这种程序，最终结果就是，您可以使用这么一块代码：该代码是您不必亲自编写的，或者，如果没有大量的帮助和资源的话，就无法编写该代码，而您手头上并没有这些资源。诸如 Apache 之类的项目为利用他人完成的工作提供了方便 -- 不必担心，他们还希望您使用他们的作品呢!
很多时候，您会遇到非技术问题。您不需要帮助也能编写某个脚本或某段代码，然而，手头上却没有所需的数据或资源。在这些情况下，即使有了教程或者开放源码脚本，也还需要更多的东西。例如，考虑在 Web 页面上增加一个搜索引擎的情况。这样做的前提是您已经有了要搜索的数据 -- 但是，如果要搜索您公司或组织以外的数据，那么该怎么办呢？
如果不是因为技术上的原因，而是因为数据而受到限制，那么，一个公共 API 也许可以帮助您解决问题。公共 API 允许使用其他人的服务器上的程序并使用其他人的数据。通常，API 本身只定义如何与该程序交互。例如，通过一个用于 Google 搜索引擎的公共 API 可以发出搜索请求，但是实际上是由 Google 的代码搜索 Google 的数据，然后将结果返回给您的程序。您不仅可以利用他人在编写这些程序方面的技能，还可以利用远远超过您自己公司所能支持的数据。
毋庸置疑，Google 仍然是在线时代极其重要的应用。上至老奶奶，下至四岁小孩，即使不理解网上的其它东西是怎么回事，也一定知道 Google。Google 运行着如此流行、如此有用的搜索引擎，并且致力于提供(几乎全部)免费的服务，所以毫不奇怪，它能提供可以在您自己的程序中使用的公共 API。在本节中，您将完成使用 Google API 的准备工作，并清楚地了解如何与 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，单击 Generate API Key，等待一二秒钟。此时必须登录 Google，或者创建一个帐户。这是一个相当标准的过程，您应该可以自己完成。完成上述操作后，可以看到一个回复页面，其中给出了一个非常长的密钥，并确认您的 URL，甚至还给出一个示例页面。这个密钥看上去类似于以下形式：
ABQIAAAAjtuhyCXrSHOFSz7zK0f8phSA9fWLQO3TbB2M9BRePlYkXeAu8lHeUgfgRs0eIWUaXg
（本文来源于图老师网站，更多请访问https://www.tulaoshi.com/webkaifa/）（本文来源于图老师网站，更多请访问https://www.tulaoshi.com/webkaifa/）
在开始使用获得的密钥之前，要花点时间阅读一下 Google 的 API 文档（在提供密钥的页面的底端有一个链接，本文的参考资料中也提供了该链接）。即使您通过本文有了很好的初步认识，仍然会发现 Google
sp; 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
div id="searchcontrol" /
......
注意使用从 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
searchControsp; 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");
}
（本文来源于图老师网站，更多请访问https://www.tulaoshi.com/webkaifa/）
到目前为止，还不能明显看出这个简单的搜索框中哪里存在异步性。当然，在 Web 应用程序中某个地方提供一个 Google 搜索框确实很棒，但是这毕竟是关于 Ajax 应用程序的系列文章，而不是关于 Google 搜索的系列文章。那么，Ajax 到底在哪里呢？
输入搜索词并单击 Search 按钮，您将注意到一个非常有 Ajax 风格的响应：搜索结果直接显示出来，并没有页面重新装载过程。这正是大多数 Ajax 应用程序的标志之一，即无需重新装载页面，直接显示内容更改。显然，这已经超出了常规请求/响应模型的能力范围。但是，XMLHttpRequest 在哪里呢？曾经在那么多文章中风光一时的 request 对象如今何在？除了那个 getElementById() 方法，DOM 和页面操作又在哪里？实际上，这一切都包含在 HTML 内的两行代码中。
Google 负责处理 JavaScript
第一行要注意的代码尚未多加讨论，该代码如清单 7 所示。
清单 7. 至关重要的 JavaScript 文件
要的是学习如何使用任意的 公共 API。还应该开始转变观念，不要再将自己的应用程序看作自我编程技能的总和；相反，它可以是通向各种数据的一个大门。而这些数据可能存储在 Google、Amazon.com、del.icio.us 的服务器上或者其他任何地方。在这些数据的基础上，添加您自己的业务或项目内容，就可以得到非常强大、非常健壮的解决方案，这远远超过您自己编写的作品。
所以，把眼光放远一点，构建大 应用程序。使用来自各种地方的数据，不要限于自己编写的代码。享受使用他人代码的乐趣，在本系列接下来的文章中，我将谈到更多技术问题，例如数据格式。
Brett McLaughlin 从 Logo 时代就开始使用计算机。（还记得那个小三角吗？）近年来，他已经成为 Java 和 XML 社区最著名的作者和程序员之一。他曾经在 Nextel Communications 实现过复杂的企业系统，在 Lutris Technologies 编写过应用服务器，最近，他在 O'Reilly Media, Inc. 继续撰写和编辑这方面的图书。Brett 即将出版的新书 Head Rush Ajax 为 Ajax 带来了获奖的革命性 Head First 方法。最近的著作 Java 1.5 Tiger: A Developer's Notebook 是关于 Java 技术最新版本的第一本书。经典的 Java and XML 依然是在 Java 语言中使用 XML 技术的权威著作。
