掌握AJAX, 第 9部分: 运用Google Ajax搜索API
拓拔嘉运
掌握AJAX, 第 9部分: 运用Google Ajax搜索API
本系列英文链接：http://www-128.ibm.com/developerworks/views/web/libraryview.jsp?search_by=Mastering+Ajax
本系列中文链接：
http://www.ibm.com/developerworks/cn/web/wa-ajaxintro/
利用共公API使你的异步应用获益
developerWorks
等级: 中级
Brett McLaughlin (mailto:brett@newInstance.com?subject=Using the Google Ajax Search API&cc=htc@us.ibm.com), 作者和编辑, O'Reilly Media Inc.
2007年1月23日
创建异步请求并不仅仅只能在你自己的服务器端程序，你完全可以与公共API进行通信，例如Google 或者 Amazon的公共API。 比起使用你自己的脚本和服务器端程序来说，它们可以为你的Web应用提供更多的功能。 在这篇文章中， Brett McLaughlin将教你如何从公共API(如Google)创建请求接收响应。
迄今为止，我们的重点一直放在你的客户端Web页如何创建请求到你的服务器端脚与程序上。这大概可以让80%－90%的 Ajax 应用 -- 使用XMLHttpRequest object对象进行异步通讯的Web应用 -- 工作。但是，一个很明显且严重的局限性放在了我们的面前：你自己的想象力与编程能力毕竟是有限的，即使是在你的公司，你们的想象力或编程技巧也是有限的。
的确，在某些时候你会发现你真的想完成某些事情，但你不具备必须的技术知识来达成目标。可能是你不知道种语言的用法，也可能是如何设计出正确的算法。还有可能，你不能获得必要的信息(无论是人力资料还是数据资源)来满足你的需求。在这样的情况下，或许你就会想：“呀，要是我可以使用那些人的代码该有多好！” 如果你这样想，现在就让我来告诉你怎么做吧。
开放源码的脚本和程序
在我开始这篇文章之前 -- 在你的Web应用中使用 -- 必须要先简单介绍一下开放源码脚本与程序。 开放源码 是一组常常用来描述那些在一定的范围内可以自由地在你的Web应用中使用和重用的代码。相关 资源链接现在大概有10,000行，你可以使用别人已经完成的开放源码，只需要简单的把它们添入你的环境中，没有任何的约束或限制
如果你决定要使用开放源码，有时你必须要在你的应用中加入额外的文档，或者你决定把你的的改进贡献给开源社区。无论你如何使用这些程序，最终的结果都是：你可以使用这些代码而不必再写一遍，或者可能是那些没有足够帮助和没有足够资源你就无法写的代码。象Apache这样的工程，开发者希望能让你的工作更易于获得优势－－不必但心，他们期望你使用他们的成果！
文章及在线教程
通过internet可访问到在IBM developerWorks上发表的资源，无论是文章，还是教程，或者白皮书，均不提及它们的价值，这是一件多么愚蠢的事情。 确实有成百上千篇在线教程，你也许可以找到上百篇的关于Ajax的文章－－我就这个主题也已经写了十篇以上！绝大部分文章中有可用的代码，示例，下载，并且所有这些你都可以使用。
如果你没有能力编写你想使用的服务器端程序或代码，也可能你不能找到你需要的开放源代码程序或脚本，你可以跳到Google并键入你想寻找的简单描述。你通常都会找到应该可以帮你做到你所需要的一篇文章，技巧，或者别的在线片段。你也可以跳到developerWorks，输入同样的简单描述，这时你却能找到正确的完整代码，带有完整说明它是怎么工作的注释的完整脚本。
使用公共的API
很多时候，你会发现，你所面临的问题并不仅仅只是技术。你完全可以搞定所有的脚本和代码，可是你却没有你所需要的数据或资源。在这样的情况下，或许教程和开放源码可以帮到你，但还不够。考虑这样的一种情况,你想在你的Web页中放一个搜索引擎。假定你需要一些你要搜索的数据－－但是如果你想搜索的数据比公司或组织可提供的数据更多时怎么办？
在这种情况下，限制你的不是你的技术能力，而是数据，公共API或许可以解决你的问题。公共API允许你使用其他人的服务器的端口，使用他们的数据。通常，API自己定义你如何与你的程序互动，比如，一个Google搜索引擎的公共API可以让你提出搜索请求，但Google的代码会去搜索Google的数据，之后将结果返回给你的程序。你不仅可以受益于其他人的技术技能，而且受益于远比你或你的公司所能提供的数据贮备。
开始学习使用Google Ajax搜索API
毫无疑问，Google依然是上网应用的重要技术。80的老人和4岁的小孩子都知道Google。即使他们并不明白上网是怎么回事。它是一个非常流行和有用的搜索引擎，并且Google一直致力于提供相当多的免费服务，所以，可以在你自己的程序中使用它的公共API是毫不奇怪的。在这一章，你将学会使用Google API，为帮助你正确的理解如何创建到Google的异步应用通信作准备。
获得Google开发者ID
这篇文章将关注于Google的Ajax搜索API。访问Google Ajax搜索API主页，你可以找到更多关于这方面API的细节，图1是它的一个展示。 (参见 资源 链接 )
图 1. Google的Ajax搜索 API帮助页
Google的Ajax搜索API帮助页
你的第一步是单击Sign up for a Google AJAX Search API key链接。它将跳到一个能让你注册使用Google API的页面。你必须接受这些使用条款--说实在的，我真的觉得一点也不幽默 -- 并提供你自己的应用Web站点的URL (参见图 2).
图2. 注册Google的Ajax搜索API
Signing up for Google's Ajax Search APIn
我应该用什么URL?
Google请求你填写的URL其实就是你的站点的域名。如果你有自己的顶级域名(我就有)，那你就只需要提交http://www.newinstance.com (这是我的服务器的域名，显然，你应该换成你自己的)。如果你的站点是一个大域下的子域或者子目录，你或许需要提供象http: //www.earthlink.net/~bmclaugh 或者 http://brett.earthlink.net的URL。尽管还有其它的特殊情况，但也不要提供过度详细的URL给Google，只需要给它访问你完整Web站点的根URL就可以了。这样你可以在站点下的任何位置使用API。
一旦你读完了条例并选上了复选框，键入了你的URL，点击Generate API Key按钮并等待一到两秒。这时你必须使用你的Google账户联到Google上，或者建立一个新账户。这是很标准的过程，你可以很轻松的搞定。一旦你完成，你会得到一个正确的回复页，那上面列出了一个很长的ID，重复你的URL，甚至还提供给你一个示例代码。那个ID看上去会象这样：
ABQIAAAAjtuhyCXrSHOFSz7zK0f8phSA9fWLQO3TbB2M9BRePlYkXeAu8lHeUgfgRs0eIWUaXg
Google的 API 文档
在你使用分配给你的ID之前，你应该抽点时间去查看一下Google的API文档(在提供给你ID的那个页面的底部有一个链接，我们这篇文章的资源部分也有这个链接). 尽管通过这篇文章你也可以获得好的开始，但是你会发现Google API文档是一个好帮助，它很可能会为你独特的应用提供一些如何在你自己的站点上使用Google的有趣的主意。
最简单的Google搜索Web应用
为了让你了解究竟可以怎么做，让我们一起通过Google提供的Web示例，并做一点点修改，看看它究竟是怎么工作的。
创建一个搜索框
清单1列出了一个相当简单的Web页；把它们键入你喜欢的编辑器中，保存，并上载到你在前面一节中提供给Google的域或者URL。
清单1. 一个简单的Google搜索应用
<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=在这里键入你的ID"
type="text/javascript"> </script>
<script language="Javascript" type="text/javascript">
function OnLoad() {
// 创建一个Google搜索控件
var searchControl = new GSearchControl();
// 这里允许你自定义在搜索结果中显示的内容。
var localSearch = new GlocalSearch();
searchControl.addSearcher(localSearch);
searchControl.addSearcher(new GwebSearch());
searchControl.addSearcher(new GvideoSearch());
searchControl.addSearcher(new GblogSearch());
// 告诉Google你的位置以便Google知道应该使用哪里的搜索服务器。
localSearch.setCenterPoint("Dallas, TX");
// "画"控件到HTML表单上
searchControl.draw(document.getElementById("searchcontrol"));
}
</script>
</head>
<body οnlοad="OnLoad()">
<div id="searchcontrol" />
</body>
</html>
确认使用了你从Google上获得的开发ID替换了黑体字部分。当你下载了这个页面，你应该可以看到如图3那样的页面。
图3. 最简单的从Google进行搜索的页面
The simplest search form for Google
看上去并没有什么，但所有Google的神奇都藏匿在了小小的控件后面。
运行一个搜索
键入一个搜索条件并点击Search以提交到Google。你将很快看到如图4那样的结果弹出。
图4. Google的搜索结果
Google's search results
添加一个预搜索查询
很明显，一旦你执行了一个搜索查询，页面看上去整个都漂亮了许多；视频，博客等，搜索结果有一个比较好看的显示。因此，你或许需要添加一个 预搜索 -- 一个你自定义的搜索查询，当用户下载你的页面时，这个自定义结果将首先显示在用户的浏览器中。要做到这点，只需要在你的JavaScript中添加清单2中的加粗的那一行就够了。
清单 2. 添加一个预搜索查询
function OnLoad() {
// 创建一个Google搜索控件
var searchControl = new GSearchControl();
// 这里允许你自定义在搜索结果中显示的内容。
var localSearch = new GlocalSearch();
searchControl.addSearcher(localSearch);
searchControl.addSearcher(new GwebSearch());
searchControl.addSearcher(new GvideoSearch());
searchControl.addSearcher(new GblogSearch());
// 告诉Google你的位置以便Google知道应该使用哪里的搜索服务器。
localSearch.setCenterPoint("Dallas, TX");
// "画"控件到HTML表单上
searchControl.draw(document.getElementById("searchcontrol"));
searchControl.execute("Christmas Eve");
}
显然，你完全可以插入你自己的初始化查询提交到你的代码中，以自定义当你的页面被加载时显示的内容。
JavaScript 分析
在我继续之前，让我们快速回顾一下到目前我们做过的基本工作。第一，一个新的GSearchControl已被创建，如清单3所阐明的那样。这个结构可以让你完成所有的搜索：
清单 3. 创建一个新的GSearchControl
function OnLoad() {
// 创建Google搜索控件
var searchControl = new GSearchControl();
...
}
接着代码使用一个GlocalSearch设置了一个新的本地搜索;这是一个Google执行的控件，它允许你基于你的位置进行搜索。搜索位置的指定如清单4
清单 4. 设置一个新的搜索位置。
function OnLoad() {
// 创建一个Google控件
var searchControl = new GSearchControl();
// 这里允许你自定义在搜索结果中显示的内容。
var localSearch = new GlocalSearch();
...
// 告诉Google你的位置以便Google知道应该使用哪里的搜索服务器。
localSearch.setCenterPoint("Dallas, TX");
...
}
所有这些都是自明的, 一旦你学会对象和方法的调用。清单 4建立一个新的本地搜索器与设置这个搜索器就成为了重点。
清单5里的几行代码精确地告诉搜索控件哪些类型的搜索器将被执行。
清单 5. 指定允许的搜索类型
function OnLoad() {
// 创建一个Google控件
var searchControl = new GSearchControl();
// 这里允许你自定义在搜索结果中显示的内容。
var localSearch = new GlocalSearch();
searchControl.addSearcher(localSearch);
searchControl.addSearcher(new GwebSearch());
searchControl.addSearcher(new GvideoSearch());
searchControl.addSearcher(new GblogSearch());
// 告诉Google你的位置以便Google知道应该使用哪里的搜索服务器。
localSearch.setCenterPoint("Dallas, TX");
...
}
你可以指定许多种搜索类型，这里有一个简单描述：
* GwebSearch: 一个用于搜索Web的对象，这是最常用的参数。
* GvideoSearch: 这个对象使用你的查询条件来搜索视频相关的内容。
* GblogSearch: 这个对象专用于搜索那个结构和标签与其他Web内容类型有细小区别的博客。
你已经学会了如何预加载一个指定的搜索，现在剩下要做的事，就是draw() 方法的调用，(清单 6中的黑体部分) 将你的HTML中的一个DOM元素传给这个调用(关于DOM的引用，可以在资源中查找这个系列的前面的篇章)。 于是，这个控件魔术般地显示在你的表单中，等待你的使用。
清单 6. 绘制搜索控件
function OnLoad() {
// 实例化Google搜索控件
var searchControl = new GSearchControl();
// 这里允许你自定义在搜索结果中显示的内容。
var localSearch = new GlocalSearch();
searchControl.addSearcher(localSearch);
searchControl.addSearcher(new GwebSearch());
searchControl.addSearcher(new GvideoSearch());
searchControl.addSearcher(new GblogSearch());
// 告诉Google你的位置以便Google知道应该使用哪里的搜索服务器。
localSearch.setCenterPoint("Dallas, TX");
// "画"控件到HTML表单上
searchControl.draw(document.getElementById("searchcontrol"));
searchControl.execute("Christmas Eve");
}
可是，Ajax在哪里？
在这个简单的搜索框示例中，的确不容易看出异步的发生。当然，在自己Web应用中的任何位置生成一个Google搜索框，相当酷，可是，这是一个Ajax应用的系列文章，而不是Google搜索应用的系列文章，所以，Ajax在哪里？
键入一个搜索条目并点击Search 按钮,你将注意到一个非常Ajax的响应：搜索结果的提交并没有刷新页面。这可是所有Ajax应用的特点之一 -- 可显示内容的更新不需要刷新页面。很明显,某些事情并没有按普通的request/response模型方式发生。 可是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=
[你的Google开发者ID]"
type="text/javascript"> </script>
这里的语法并没有什么特别有趣的地方，但需要指出的是Google服务器上的那个叫做uds.js的文件，它包含了所有对搜索框进行操作所必须的JavaScript。这是在利用别人的代码时得到的最真实的感受：你甚至正在你的应用中使用第三方服务器上的代码。这是具有相当重要意义的。因为当Google公司进行维护和升级这个JavaScript文件时，你可以自动从中获益。Google不会不让你知道就改变其API，所以无论JavaScript文件是否发生变化，你的代码都将正常工作。
GSearchControl对象
另外的一些代码被隐藏在了 GSearchControl对象, 它在 onLoad() JavaScript 函数中被建立。所有你需要做的事就是如清单8中所做的那样调用代码创建这个对象
清单 8. 创建一个GSearchControl对象
// 创建一个Google搜索对象
var searchControl = new GSearchControl();
HTML所需要做的是如此乏味：只需要一个带有能让你的JavaScript可以引用到的ID的 div标记，就象清单9那样。
清单 9. 关于你要创建的搜索控件，你将要写的HTML
<div id="searchcontrol" />
Google的JavaScript倒底写些什么？
Google的JavaScript可不是那么容易就能理解的。首先，uds.js脚本文件对区域设置进行计算，处理“Google式”的任务，校验你的Google开发者ID，最后下载下列两个脚本 http://www.google.com/uds/js/locale/en/uistrings.js与 http://www.google.com/uds/js/uds_compiled.js。如果你很感兴趣，你可以提取并辛苦地阅读它们，但是小心：理解高级代码总是一件艰巨的工作，特别是它们还有一个非常糟糕的格式！对于你来说，相对于代码行级的巨大麻烦，你的目标更应该是仅仅了解如何使用这些文件罢。
但是，又一次地，Google的代码在幕后做了所有的事。它创建了一个新的文本框，一个传统风格的图形，一个可以调用JavaScript函数的按钮也被写在了Google的JavaScript中。所以，你免费获得了所有的行为;你应该基本明白这些是如何发生的，这样你就能便利的仅只是使用代码，继续你的应用程序。
Ajax并不仅仅是你写的那几行代码
因此， Ajax并不仅仅是你正在使用的XmlHttpRequest; Ajax其实是一种处理Web应用的手段，当然，它基于异步。即使你没有写任何的“Ajax式”的代码，但你仍然建立了一个Ajax应用。感谢Google：它做了这么多的工作，让你受益!
进一步了解Google的Ajax搜索API
现在，是你开始接受这些步骤并让它们配合到你自己的应用的时候了。在最简单的情况下，你只需要拖一个div到你自己的Web页中，加入清单清单1的脚本，之后，一切搞定！
但乐趣并非至此之止。你不要被这些模式选项或控件所限制。无论是Web搜索结果，Blog搜索结果，还是视频搜索结果，你完全可以以适当的方式整合它到你的 Web应用中。你或许还想提供多个搜索控件，每一个产生不同的搜索类型结果。你或许想把Google搜索控件包含在一个span元素里，正确的置于你的应用内容中间，而不是放置于一个边上的div。无论怎样，你的确得记住这一点：应该让Google搜索适合你的需要，而不是修改你的应用去适应Google。
总结
现在对你来说，添加Google搜索框或使用其他的Google API到你的Ajax应用时，应该不会觉得有多难。更进一步，不仅仅是Google搜索框，关于公共API的一般使用，噢！你一定有了相当棒的主意！例如，Amazon.com就提供了一个公共API，它允许你象运行Google那样，完成对Amazon的商店内同类书籍与其他商品的搜索。你可以开始寻找那些你中意的公共API，让它们帮助你超越自己的编程技巧。事实上，你可以非常容易的创建一个站点，将Google，Amazon.com, Flickr以及等等公共API整合到其中。
如何使用Google来转换处理是非常重要的 -- 因为Google提供了搜索算法与海量数据存贮 --了解这一点甚至比学习如何使用任意公共API更重要。你可能已经开始考虑让你的应用超越现有水平的总和;可以说，Google是通向各类数据的大门。这些数据可能存贮在Google，Amazon.com，del.icio.us及任何地方。添加这些数据到你的商业或工程中，你就获得了远超过你自己所能做到的能力与解决方案。
好的，去做一个划时代的 应用吧。使用来自不同地方不同种类的数据，不必受限于你自己的代码。好好享受它，而在这个系列的下一篇文章中，我将回归到更多的技术主题上，如数据格式之类。
您好：
当您在阅读和使用我所提供的各种内容的时候，我非常感谢，您的阅读已是对我最大的支持。
我更希望您能给予我更多的支持。
1.希望您帮助我宣传我的博客，让更多的人知道它，从中获益。
2.希望您能多提出宝贵意见，包括我所提供的内容中的错误，建设性的意见，更希望获得哪些方面的帮助，您的经验之谈等等。
3.更希望能得到您经济上的支持。
我博客上面的内容均属于个人的经验，所有的内容均为开源内容，允许您用于任何用途，并不以付费为前提，如果您觉得在阅读和使用我所提供的各种内容的过程中，您得到了帮助，并能在经济上给予我支持，我将感激不尽。
您可以通过银行转帐付款给我：
招商银行一卡通：
卡号：6225888712586894
姓名：牟勇
建行龙卡：
卡号：4367423860500165563
姓名：牟勇
您也可以通过汇款的方式：
通讯地址：云南省昆明市女子(28)中学人民中路如意巷1号
收信人：陈谦转牟勇收
邮编：650021
无论您给予我怎么样的支持，我都衷心的再次感谢。
欢迎光临我的博客，欢迎宣传我的博客
http://blog.csdn.net/mouyong
http://blog.sina.com.cn/u/1259714872
本系列英文链接：http://www-128.ibm.com/developerworks/views/web/libraryview.jsp?search_by=Mastering+Ajax
本系列中文链接：
http://www.ibm.com/developerworks/cn/web/wa-ajaxintro/
利用共公API使你的异步应用获益
developerWorks
等级: 中级
Brett McLaughlin (mailto:brett@newInstance.com?subject=Using the Google Ajax Search API&cc=htc@us.ibm.com), 作者和编辑, O'Reilly Media Inc.
2007年1月23日
创建异步请求并不仅仅只能在你自己的服务器端程序，你完全可以与公共API进行通信，例如Google 或者 Amazon的公共API。 比起使用你自己的脚本和服务器端程序来说，它们可以为你的Web应用提供更多的功能。 在这篇文章中， Brett McLaughlin将教你如何从公共API(如Google)创建请求接收响应。
迄今为止，我们的重点一直放在你的客户端Web页如何创建请求到你的服务器端脚与程序上。这大概可以让80%－90%的 Ajax 应用 -- 使用XMLHttpRequest object对象进行异步通讯的Web应用 -- 工作。但是，一个很明显且严重的局限性放在了我们的面前：你自己的想象力与编程能力毕竟是有限的，即使是在你的公司，你们的想象力或编程技巧也是有限的。
的确，在某些时候你会发现你真的想完成某些事情，但你不具备必须的技术知识来达成目标。可能是你不知道种语言的用法，也可能是如何设计出正确的算法。还有可能，你不能获得必要的信息(无论是人力资料还是数据资源)来满足你的需求。在这样的情况下，或许你就会想：“呀，要是我可以使用那些人的代码该有多好！” 如果你这样想，现在就让我来告诉你怎么做吧。
开放源码的脚本和程序
在我开始这篇文章之前 -- 在你的Web应用中使用 -- 必须要先简单介绍一下开放源码脚本与程序。 开放源码 是一组常常用来描述那些在一定的范围内可以自由地在你的Web应用中使用和重用的代码。相关 资源链接现在大概有10,000行，你可以使用别人已经完成的开放源码，只需要简单的把它们添入你的环境中，没有任何的约束或限制
如果你决定要使用开放源码，有时你必须要在你的应用中加入额外的文档，或者你决定把你的的改进贡献给开源社区。无论你如何使用这些程序，最终的结果都是：你可以使用这些代码而不必再写一遍，或者可能是那些没有足够帮助和没有足够资源你就无法写的代码。象Apache这样的工程，开发者希望能让你的工作更易于获得优势－－不必但心，他们期望你使用他们的成果！
文章及在线教程
通过internet可访问到在IBM developerWorks上发表的资源，无论是文章，还是教程，或者白皮书，均不提及它们的价值，这是一件多么愚蠢的事情。 确实有成百上千篇在线教程，你也许可以找到上百篇的关于Ajax的文章－－我就这个主题也已经写了十篇以上！绝大部分文章中有可用的代码，示例，下载，并且所有这些你都可以使用。
如果你没有能力编写你想使用的服务器端程序或代码，也可能你不能找到你需要的开放源代码程序或脚本，你可以跳到Google并键入你想寻找的简单描述。你通常都会找到应该可以帮你做到你所需要的一篇文章，技巧，或者别的在线片段。你也可以跳到developerWorks，输入同样的简单描述，这时你却能找到正确的完整代码，带有完整说明它是怎么工作的注释的完整脚本。
使用公共的API
很多时候，你会发现，你所面临的问题并不仅仅只是技术。你完全可以搞定所有的脚本和代码，可是你却没有你所需要的数据或资源。在这样的情况下，或许教程和开放源码可以帮到你，但还不够。考虑这样的一种情况,你想在你的Web页中放一个搜索引擎。假定你需要一些你要搜索的数据－－但是如果你想搜索的数据比公司或组织可提供的数据更多时怎么办？
在这种情况下，限制你的不是你的技术能力，而是数据，公共API或许可以解决你的问题。公共API允许你使用其他人的服务器的端口，使用他们的数据。通常，API自己定义你如何与你的程序互动，比如，一个Google搜索引擎的公共API可以让你提出搜索请求，但Google的代码会去搜索Google的数据，之后将结果返回给你的程序。你不仅可以受益于其他人的技术技能，而且受益于远比你或你的公司所能提供的数据贮备。
开始学习使用Google Ajax搜索API
毫无疑问，Google依然是上网应用的重要技术。80的老人和4岁的小孩子都知道Google。即使他们并不明白上网是怎么回事。它是一个非常流行和有用的搜索引擎，并且Google一直致力于提供相当多的免费服务，所以，可以在你自己的程序中使用它的公共API是毫不奇怪的。在这一章，你将学会使用Google API，为帮助你正确的理解如何创建到Google的异步应用通信作准备。
获得Google开发者ID
这篇文章将关注于Google的Ajax搜索API。访问Google Ajax搜索API主页，你可以找到更多关于这方面API的细节，图1是它的一个展示。 (参见 资源 链接 )
图 1. Google的Ajax搜索 API帮助页
Google的Ajax搜索API帮助页
你的第一步是单击Sign up for a Google AJAX Search API key链接。它将跳到一个能让你注册使用Google API的页面。你必须接受这些使用条款--说实在的，我真的觉得一点也不幽默 -- 并提供你自己的应用Web站点的URL (参见图 2).
图2. 注册Google的Ajax搜索API
Signing up for Google's Ajax Search APIn
我应该用什么URL?
Google请求你填写的URL其实就是你的站点的域名。如果你有自己的顶级域名(我就有)，那你就只需要提交http://www.newinstance.com (这是我的服务器的域名，显然，你应该换成你自己的)。如果你的站点是一个大域下的子域或者子目录，你或许需要提供象http: //www.earthlink.net/~bmclaugh 或者 http://brett.earthlink.net的URL。尽管还有其它的特殊情况，但也不要提供过度详细的URL给Google，只需要给它访问你完整Web站点的根URL就可以了。这样你可以在站点下的任何位置使用API。
一旦你读完了条例并选上了复选框，键入了你的URL，点击Generate API Key按钮并等待一到两秒。这时你必须使用你的Google账户联到Google上，或者建立一个新账户。这是很标准的过程，你可以很轻松的搞定。一旦你完成，你会得到一个正确的回复页，那上面列出了一个很长的ID，重复你的URL，甚至还提供给你一个示例代码。那个ID看上去会象这样：
ABQIAAAAjtuhyCXrSHOFSz7zK0f8phSA9fWLQO3TbB2M9BRePlYkXeAu8lHeUgfgRs0eIWUaXg
Google的 API 文档
在你使用分配给你的ID之前，你应该抽点时间去查看一下Google的API文档(在提供给你ID的那个页面的底部有一个链接，我们这篇文章的资源部分也有这个链接). 尽管通过这篇文章你也可以获得好的开始，但是你会发现Google API文档是一个好帮助，它很可能会为你独特的应用提供一些如何在你自己的站点上使用Google的有趣的主意。
最简单的Google搜索Web应用
为了让你了解究竟可以怎么做，让我们一起通过Google提供的Web示例，并做一点点修改，看看它究竟是怎么工作的。
创建一个搜索框
清单1列出了一个相当简单的Web页；把它们键入你喜欢的编辑器中，保存，并上载到你在前面一节中提供给Google的域或者URL。
清单1. 一个简单的Google搜索应用
<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=在这里键入你的ID"
type="text/javascript"> </script>
<script language="Javascript" type="text/javascript">
function OnLoad() {
// 创建一个Google搜索控件
var searchControl = new GSearchControl();
// 这里允许你自定义在搜索结果中显示的内容。
var localSearch = new GlocalSearch();
searchControl.addSearcher(localSearch);
searchControl.addSearcher(new GwebSearch());
searchControl.addSearcher(new GvideoSearch());
searchControl.addSearcher(new GblogSearch());
// 告诉Google你的位置以便Google知道应该使用哪里的搜索服务器。
localSearch.setCenterPoint("Dallas, TX");
// "画"控件到HTML表单上
searchControl.draw(document.getElementById("searchcontrol"));
}
</script>
</head>
<body οnlοad="OnLoad()">
<div id="searchcontrol" />
</body>
</html>
确认使用了你从Google上获得的开发ID替换了黑体字部分。当你下载了这个页面，你应该可以看到如图3那样的页面。
图3. 最简单的从Google进行搜索的页面
The simplest search form for Google
看上去并没有什么，但所有Google的神奇都藏匿在了小小的控件后面。
运行一个搜索
键入一个搜索条件并点击Search以提交到Google。你将很快看到如图4那样的结果弹出。
图4. Google的搜索结果
Google's search results
添加一个预搜索查询
很明显，一旦你执行了一个搜索查询，页面看上去整个都漂亮了许多；视频，博客等，搜索结果有一个比较好看的显示。因此，你或许需要添加一个 预搜索 -- 一个你自定义的搜索查询，当用户下载你的页面时，这个自定义结果将首先显示在用户的浏览器中。要做到这点，只需要在你的JavaScript中添加清单2中的加粗的那一行就够了。
清单 2. 添加一个预搜索查询
function OnLoad() {
// 创建一个Google搜索控件
var searchControl = new GSearchControl();
// 这里允许你自定义在搜索结果中显示的内容。
var localSearch = new GlocalSearch();
searchControl.addSearcher(localSearch);
searchControl.addSearcher(new GwebSearch());
searchControl.addSearcher(new GvideoSearch());
searchControl.addSearcher(new GblogSearch());
// 告诉Google你的位置以便Google知道应该使用哪里的搜索服务器。
localSearch.setCenterPoint("Dallas, TX");
// "画"控件到HTML表单上
searchControl.draw(document.getElementById("searchcontrol"));
searchControl.execute("Christmas Eve");
}
显然，你完全可以插入你自己的初始化查询提交到你的代码中，以自定义当你的页面被加载时显示的内容。
JavaScript 分析
在我继续之前，让我们快速回顾一下到目前我们做过的基本工作。第一，一个新的GSearchControl已被创建，如清单3所阐明的那样。这个结构可以让你完成所有的搜索：
清单 3. 创建一个新的GSearchControl
function OnLoad() {
// 创建Google搜索控件
var searchControl = new GSearchControl();
...
}
接着代码使用一个GlocalSearch设置了一个新的本地搜索;这是一个Google执行的控件，它允许你基于你的位置进行搜索。搜索位置的指定如清单4
清单 4. 设置一个新的搜索位置。
function OnLoad() {
// 创建一个Google控件
var searchControl = new GSearchControl();
// 这里允许你自定义在搜索结果中显示的内容。
var localSearch = new GlocalSearch();
...
// 告诉Google你的位置以便Google知道应该使用哪里的搜索服务器。
localSearch.setCenterPoint("Dallas, TX");
...
}
所有这些都是自明的, 一旦你学会对象和方法的调用。清单 4建立一个新的本地搜索器与设置这个搜索器就成为了重点。
清单5里的几行代码精确地告诉搜索控件哪些类型的搜索器将被执行。
清单 5. 指定允许的搜索类型
function OnLoad() {
// 创建一个Google控件
var searchControl = new GSearchControl();
// 这里允许你自定义在搜索结果中显示的内容。
var localSearch = new GlocalSearch();
searchControl.addSearcher(localSearch);
searchControl.addSearcher(new GwebSearch());
searchControl.addSearcher(new GvideoSearch());
searchControl.addSearcher(new GblogSearch());
// 告诉Google你的位置以便Google知道应该使用哪里的搜索服务器。
localSearch.setCenterPoint("Dallas, TX");
...
}
你可以指定许多种搜索类型，这里有一个简单描述：
* GwebSearch: 一个用于搜索Web的对象，这是最常用的参数。
* GvideoSearch: 这个对象使用你的查询条件来搜索视频相关的内容。
* GblogSearch: 这个对象专用于搜索那个结构和标签与其他Web内容类型有细小区别的博客。
你已经学会了如何预加载一个指定的搜索，现在剩下要做的事，就是draw() 方法的调用，(清单 6中的黑体部分) 将你的HTML中的一个DOM元素传给这个调用(关于DOM的引用，可以在资源中查找这个系列的前面的篇章)。 于是，这个控件魔术般地显示在你的表单中，等待你的使用。
清单 6. 绘制搜索控件
function OnLoad() {
// 实例化Google搜索控件
var searchControl = new GSearchControl();
// 这里允许你自定义在搜索结果中显示的内容。
var localSearch = new GlocalSearch();
searchControl.addSearcher(localSearch);
searchControl.addSearcher(new GwebSearch());
searchControl.addSearcher(new GvideoSearch());
searchControl.addSearcher(new GblogSearch());
// 告诉Google你的位置以便Google知道应该使用哪里的搜索服务器。
localSearch.setCenterPoint("Dallas, TX");
// "画"控件到HTML表单上
searchControl.draw(document.getElementById("searchcontrol"));
searchControl.execute("Christmas Eve");
}
可是，Ajax在哪里？
在这个简单的搜索框示例中，的确不容易看出异步的发生。当然，在自己Web应用中的任何位置生成一个Google搜索框，相当酷，可是，这是一个Ajax应用的系列文章，而不是Google搜索应用的系列文章，所以，Ajax在哪里？
键入一个搜索条目并点击Search 按钮,你将注意到一个非常Ajax的响应：搜索结果的提交并没有刷新页面。这可是所有Ajax应用的特点之一 -- 可显示内容的更新不需要刷新页面。很明显,某些事情并没有按普通的request/response模型方式发生。 可是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=
[你的Google开发者ID]"
type="text/javascript"> </script>
这里的语法并没有什么特别有趣的地方，但需要指出的是Google服务器上的那个叫做uds.js的文件，它包含了所有对搜索框进行操作所必须的JavaScript。这是在利用别人的代码时得到的最真实的感受：你甚至正在你的应用中使用第三方服务器上的代码。这是具有相当重要意义的。因为当Google公司进行维护和升级这个JavaScript文件时，你可以自动从中获益。Google不会不让你知道就改变其API，所以无论JavaScript文件是否发生变化，你的代码都将正常工作。
GSearchControl对象
另外的一些代码被隐藏在了 GSearchControl对象, 它在 onLoad() JavaScript 函数中被建立。所有你需要做的事就是如清单8中所做的那样调用代码创建这个对象
清单 8. 创建一个GSearchControl对象
// 创建一个Google搜索对象
var searchControl = new GSearchControl();
HTML所需要做的是如此乏味：只需要一个带有能让你的JavaScript可以引用到的ID的 div标记，就象清单9那样。
清单 9. 关于你要创建的搜索控件，你将要写的HTML
<div id="searchcontrol" />
Google的JavaScript倒底写些什么？
Google的JavaScript可不是那么容易就能理解的。首先，uds.js脚本文件对区域设置进行计算，处理“Google式”的任务，校验你的Google开发者ID，最后下载下列两个脚本 http://www.google.com/uds/js/locale/en/uistrings.js与 http://www.google.com/uds/js/uds_compiled.js。如果你很感兴趣，你可以提取并辛苦地阅读它们，但是小心：理解高级代码总是一件艰巨的工作，特别是它们还有一个非常糟糕的格式！对于你来说，相对于代码行级的巨大麻烦，你的目标更应该是仅仅了解如何使用这些文件罢。
但是，又一次地，Google的代码在幕后做了所有的事。它创建了一个新的文本框，一个传统风格的图形，一个可以调用JavaScript函数的按钮也被写在了Google的JavaScript中。所以，你免费获得了所有的行为;你应该基本明白这些是如何发生的，这样你就能便利的仅只是使用代码，继续你的应用程序。
Ajax并不仅仅是你写的那几行代码
因此， Ajax并不仅仅是你正在使用的XmlHttpRequest; Ajax其实是一种处理Web应用的手段，当然，它基于异步。即使你没有写任何的“Ajax式”的代码，但你仍然建立了一个Ajax应用。感谢Google：它做了这么多的工作，让你受益!
进一步了解Google的Ajax搜索API
现在，是你开始接受这些步骤并让它们配合到你自己的应用的时候了。在最简单的情况下，你只需要拖一个div到你自己的Web页中，加入清单清单1的脚本，之后，一切搞定！
但乐趣并非至此之止。你不要被这些模式选项或控件所限制。无论是Web搜索结果，Blog搜索结果，还是视频搜索结果，你完全可以以适当的方式整合它到你的 Web应用中。你或许还想提供多个搜索控件，每一个产生不同的搜索类型结果。你或许想把Google搜索控件包含在一个span元素里，正确的置于你的应用内容中间，而不是放置于一个边上的div。无论怎样，你的确得记住这一点：应该让Google搜索适合你的需要，而不是修改你的应用去适应Google。
总结
现在对你来说，添加Google搜索框或使用其他的Google API到你的Ajax应用时，应该不会觉得有多难。更进一步，不仅仅是Google搜索框，关于公共API的一般使用，噢！你一定有了相当棒的主意！例如，Amazon.com就提供了一个公共API，它允许你象运行Google那样，完成对Amazon的商店内同类书籍与其他商品的搜索。你可以开始寻找那些你中意的公共API，让它们帮助你超越自己的编程技巧。事实上，你可以非常容易的创建一个站点，将Google，Amazon.com, Flickr以及等等公共API整合到其中。
如何使用Google来转换处理是非常重要的 -- 因为Google提供了搜索算法与海量数据存贮 --了解这一点甚至比学习如何使用任意公共API更重要。你可能已经开始考虑让你的应用超越现有水平的总和;可以说，Google是通向各类数据的大门。这些数据可能存贮在Google，Amazon.com，del.icio.us及任何地方。添加这些数据到你的商业或工程中，你就获得了远超过你自己所能做到的能力与解决方案。
好的，去做一个划时代的 应用吧。使用来自不同地方不同种类的数据，不必受限于你自己的代码。好好享受它，而在这个系列的下一篇文章中，我将回归到更多的技术主题上，如数据格式之类。
您好：
当您在阅读和使用我所提供的各种内容的时候，我非常感谢，您的阅读已是对我最大的支持。
我更希望您能给予我更多的支持。
1.希望您帮助我宣传我的博客，让更多的人知道它，从中获益。
2.希望您能多提出宝贵意见，包括我所提供的内容中的错误，建设性的意见，更希望获得哪些方面的帮助，您的经验之谈等等。
3.更希望能得到您经济上的支持。
我博客上面的内容均属于个人的经验，所有的内容均为开源内容，允许您用于任何用途，并不以付费为前提，如果您觉得在阅读和使用我所提供的各种内容的过程中，您得到了帮助，并能在经济上给予我支持，我将感激不尽。
您可以通过银行转帐付款给我：
招商银行一卡通：
卡号：6225888712586894
姓名：牟勇
建行龙卡：
卡号：4367423860500165563
姓名：牟勇
您也可以通过汇款的方式：
通讯地址：云南省昆明市女子(28)中学人民中路如意巷1号
收信人：陈谦转牟勇收
邮编：650021
无论您给予我怎么样的支持，我都衷心的再次感谢。
欢迎光临我的博客，欢迎宣传我的博客
http://blog.csdn.net/mouyong
http://blog.sina.com.cn/u/1259714872
类似资料：