掌握AJAX, 第 9部分: 运用Google Ajax搜索API

拓拔嘉运
2023-12-01
掌握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
 类似资料: