Google AJAX Search API+TAG=美味的站点
前言
del.icio.us 提供了多种可重用的数据格式。而它提供了通用API 访问和类似PHP的输出格式，使这些数据也可以被JavaScript 开发者将其作为JSON 格式所使用。
Google AJAX Search API 提供一些简单的web 对象：它们执行建立在各种Google服务（页面搜索、本地搜索、视频搜索、Blog 搜索、新闻搜索）之上的内嵌（inline）搜索。
如何把这两项技术结合在一起呢？Google AJAX Search API+TAG=美味的站点？
什么是Google AJAX Search API ？
<shapetype id="_x0000_t75" stroked="f" filled="f" path="m@4@5l@4@11@9@11@9@5xe" o:preferrelative="t" o:spt="75" coordsize="21600,21600"><stroke joinstyle="miter"></stroke><formulas><f eqn="if lineDrawn pixelLineWidth 0"></f><f eqn="sum @0 1 0"></f><f eqn="sum 0 0 @1"></f><f eqn="prod @2 1 2"></f><f eqn="prod @3 21600 pixelWidth"></f><f eqn="prod @3 21600 pixelHeight"></f><f eqn="sum @0 0 1"></f><f eqn="prod @6 1 2"></f><f eqn="prod @7 21600 pixelWidth"></f><f eqn="sum @8 21600 0"></f><f eqn="prod @7 21600 pixelHeight"></f><f eqn="sum @10 21600 0"></f></formulas><path o:connecttype="rect" gradientshapeok="t" o:extrusionok="f"></path><lock aspectratio="t" v:ext="edit"></lock></shapetype><shape id="_x0000_i1025" style="WIDTH: 147pt; HEIGHT: 165.75pt" type="#_x0000_t75"><imagedata o:title="" src="file:///C:%5CDOCUME~1%5CWast%5CLOCALS~1%5CTemp%5Cmsohtml1%5C01%5Cclip_image003.png"></imagedata></shape>
图-1 这就是Google AJAX Search API?
Google AJAX Search API 是提供在页面和web 应用中嵌入Google Search 的JavaScript 代码库。当然像其它Google 开发API 相同，在使用它之前，你首先需要注册一个API key。
Google AJAX Search API 提供一些简单的web 对象：它们执行建立在各种Google服务（页面搜索、本地搜索、视频搜索、Blog 搜索、新闻搜索）之上的内嵌（inline）搜索。如果你设计页面是为了帮助用户建立内容（比如信息板、blog 等），而这个API 可以设计成：通过允许它们直接把搜索结果复制到它们的信息中的方式来支持前面的这些活动。
Google AJAX Search API 是最新发布的，它的特性被广泛地用户使用，你可以通过加入Google AJAX Search API 讨论组来进行反馈和技术讨论。
用户群
最好具有JavaScript 编程和面向对象编程概念。
介绍
“Hello，World”开场白
这是学习API 的最简单方式。下面的web 页面代码显示了对关键词“VW GTI”的内嵌搜索结果集合。之所以称之为集合，因为它包括了本地搜索、页面搜索、视频和Blog 搜索结果。
| <!DOCTYPE html PUBLIC "-//W<chmetcnv unitname="C" sourcevalue="3" hasspace="False" negative="False" numbertype="1" tcsc="0" w:st="on">3C</chmetcnv>//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>Hello World - Google AJAX Search API Sample</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" type="text/javascript"></script> <script language="Javascript" type="text/javascript"> //<![CDATA[ function OnLoad() { // Create a search control var searchControl = new GSearchControl(); // Add in a full set of searchers var localSearch = new GlocalSearch(); searchControl.addSearcher(localSearch); searchControl.addSearcher(new GwebSearch()); searchControl.addSearcher(new GvideoSearch()); searchControl.addSearcher(new GblogSearch()); searchControl.addSearcher(new GnewsSearch()); // Set the Local Search center point localSearch.setCenterPoint("<place w:st="on"><city w:st="on">New York</city>, <state w:st="on">NY</state></place>"); // tell the searcher to draw itself and tell it where to attach searchControl.draw(document.getElementById("searchcontrol")); // execute an inital search searchControl.execute("VW GTI"); } //]]> </script> </head> <body onload="OnLoad()"> <div id="searchcontrol"/> </body> </html>
|
你可以下载本例代码，并进行相应修改，但要注意的一点:你必须使用你自己的API key 替换掉原代码中的API key。
上面代码中包含的Google AJAX Search API javascript 库：
http://www.google.com/uds/api?file=uds.js&v=1.0&key=ABCDEFG，此库囊括了Google Search API 所用到的对象和符号。
代码中的主角是GSearchControl 对象，它控制了一个跨越多种搜索服务的搜索。
可以看到，GlocalSearch、GwebSearch、GvideoSearch、GblogSearch 和GnewsSearch 类型的对象（后称搜索者对象）通过GSearchControl 对象的addSearcher 方法被添加到了搜索控制（search control）中，这些搜索者对象（searcher objects）决定了那些搜索服务在搜索控制的操控之下。
通过调用GSearchControl 的draw()方法，使搜索控制显示在页面中。此方法也可把搜索控制绑定到页面的DOM 中。默认情况下，搜索控制以线性布局(linear layout)显示，你也可以选择标签布局(tabbed layout)。关于布局的选将在下面讲解。
为了使用标签布局选项，搜索控制允许开发者轻松地把 “search form”从搜索结果集合中脱离出来。这种做法的用处之一：在页面的sidebar 中显示search form，而搜索结果罗列在页面中央。
用户通过在搜索控制的文本框中输入搜索单词后按下回车按钮或者点击搜索按钮的方式启动一次搜索。搜索控制将自动进行一次对所要求的各种Google 搜索服务的并行搜索。你也可以通过把搜索单词作为参数传递给搜索控制的execute()方法来以编程的方式启动搜索。
浏览器兼容性
<shape id="_x0000_i1026" style="WIDTH: 232.5pt; HEIGHT: 284.25pt" type="#_x0000_t75"><imagedata o:title="" src="file:///C:%5CDOCUME~1%5CWast%5CLOCALS~1%5CTemp%5Cmsohtml1%5C01%5Cclip_image005.png"></imagedata></shape>
图-2 租用哪种浏览器去冲浪？
Google AJAX Search API 目前支持 Firefox 1.5 以上,IE 6,Safari,Opera 9 以上。
API 升级问题
通过在URL：http://www.google.com/uds/api?file=uds.js&v=1.0 中的参数v 来声明所使用的API 版本（这里的参数v 声明的是1.0 版本）。当Google 进行API升级时，版本号将被升高，并在Google AJAX Search API 讨论组中发布通知。请注意在版本升级时的任何必需的代码变化，如果新版本和你的代码兼容的话，请更新你的URL到新的版本。
当然，在新版本发布后，Google 仍然会在一段时间内同时支持新、旧版本，这段时间可能长达一个月。而这段时间过后，使用旧版本API 的client 将不再被接受，所以请尽量保持使用新版本。
在某个版本的使用期间，Google AJAX Search API 开发团队会周期性的更新API以达到修正bug、提高性能的目的，而这是不会产生新版本的。大多数情况，这些修正对用户来讲是保持透明的，但也存在一些对client 产生无意识的破坏，请访问Google AJAX Search API 讨论组报告这些问题。
示例
注意：这里的示例仅提供了相关的Javascript 代码而并非全部的HTML 文件。你可以将这些代码插入到HTML 文件或者通过点击下载链接下载完整的HTML 文件。
基本功能
下面的代码建立了一个搜索控制，并配置它用以完成跨越本地搜索、页面搜索、视频搜索、blog 搜索的搜索，然后将搜索控制放置在页面中。
| // create a search control var searchControl = new GSearchControl(null); // add in a full set of searchers searchControl.addSearcher(new GlocalSearch()); searchControl.addSearcher(new GwebSearch()); searchControl.addSearcher(new GvideoSearch()); searchControl.addSearcher(new GblogSearch()); searchControl.addSearcher(new GnewsSearch()); // tell the searcher to draw itself and tell it where to attach // Note that an element must exist within the HTML document with id "search_control" searchControl.draw(document.getElementById("search_control")); |
GSearcherControl 绘制（Draw）模式
搜索控制可以通过编程选择不同的绘制模式：线性（linear）、标签（tabbed）。GdrawOptions 对象通过它的setDrawMode()方法控制了这种行为。此方法可选择的参数：
GSearchControl.DRAW_MODE_LINEAR
GSearchControl.DRAW_MODE_TABBED
为了实际设置搜索控制对象的绘制模式，需要把GdrawOptions 对象作为参数传送给搜索控制对象的draw 方法。
| // create a drawOptions object var drawOptions = new GdrawOptions(); // tell the searcher to draw itself in linear mode drawOptions.setDrawMode(GSearchControl.DRAW_MODE_LINEAR); searchControl.draw(element, drawOptions); // tell the searcher to draw itself in tabbed mode drawOptions.setDrawMode(GSearchControl.DRAW_MODE_TABBED); searchControl.draw(element, drawOptions); |
此方法的另一种常见的选项能将“search form”从搜索结果集合中脱离出来。GdrawOptions 对象通过setSearchFormRoot()方法控制这种行为。此方法接受将作为search form 容器的DOM 元素作为参数。
| // create a drawOptions object var drawOptions = new GdrawOptions(); drawOptions.setSearchFormRoot(document.getElementById("searchForm")); searchControl.draw(element, drawOptions); |
搜索者对象（Searcher Objects）
搜索控制对象的addSearcher()方法决定了搜索控制对象操控哪些搜索服务。此方法需要2 个参数：一个参数提供服务对象，另一个提供该服务的选项。下面是当前所支持的搜索者对象：
GlocalSearch
GwebSearch
GvideoSearch
GblogSearch
GnewsSearch
随着Google AJAX Search API 的进化，将会有更多支持的服务被加进来。
搜索者选项（GsearcherOptions）
在单独添加搜索者给搜索控制时，addSearcher()方法的第二个可选参数：
GsearcherOptions 对象，它控制每个服务的默认展开模式，后者影响到搜索结果如何显示在页面中。展开模式有以下几种：
GsearchControl.EXPAND_MODE_OPEN：尽可能地显示全部的搜索结果。
GSearchControl.EXPAND_MODE_CLOSED：隐藏搜索结果，除非通过UI 元素（比如一个箭头）被打开。
GSearchControl.EXPAND_