发出异步请求并不意味着只是与您自己的服务器端程序交互。其实也可以与一些公共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，单击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函数的按钮。所以，您免费获得了所有行为。虽然您应该理解其中的基本工作原理，但更方便的是，您可以直接使用该代码，然后编写应用程序剩下的部分。
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的服务器上或者其他任何地方。在这些数据的基础上，添加您自己的业务或项目内容，就可以得到非常强大、非常健壮的解决方案，这远远超过您自己编写的作品。
所以，把眼光放远一点，构建大 应用程序。使用来自各种地方的数据，不要限于自己编写的代码。享受使用他人代码的乐趣，在本系列接下来的文章中，我将谈到更多技术问题，例如数据格式。
我们一直都在努力坚持原创.......请不要一声不吭，就悄悄拿走。
我原创，你原创，我们的内容世界才会更加精彩！
【所有原创内容版权均属TechTarget，欢迎大家转发分享。但未经授权，严禁任何媒体（平面媒体、网络媒体、自媒体等）以及微信公众号复制、转载、摘编或以其他方式进行使用。】
微信公众号
TechTarget
官方微博
TechTarget中国
相关推荐
-
数字化转型：如何更好地利用API和微服务
API，即应用程序编程接口，它提供给应用程序、开发人员访问其它应用的能力，而又无需访问源码，无需理解内部工作机制细节；简单地说，API就是实现应用与应用连接的一种隐形的桥梁。
-
金融行业数字转型：利用API构建新IT基础
从制造业、物流业，银行业到零售业，各行各业的根基都因应用经济的兴起发生着深刻的变革。在互联网和智能手机普及化的推动下，这种现象变得司空见惯。到2021年 ，蓬勃发展的全球应用经济的预估总值将达到6.3万亿美元，相比2016年的1.3万亿美元，增长近5倍。
-
如何使用Azure API管理服务？
在云和微服务架构时代，API是数字化业务的通用语言。根据分析公司Forrester Research预测，仅在美国，API管理工具的支出将在未来5年内达到近30亿美元。
-
私有存储云如何构建?
如何构建自己的私有存储云呢？在这之前，我们要先退后一步，思考一下云计算到底意味着什么。