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 ？

图 -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() 方法来以编程的方式启动搜索。

浏览器兼容性

图 -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_

Google AJAX Search API+TAG=美味的站点

更多文章、技术交流、商务合作、联系博主

微信扫码或搜索：z360901061

微信扫一扫加我为好友

QQ号联系： 360901061

您的支持是博主写作最大的动力，如果您喜欢我的文章，感觉我的文章对您有帮助，请用微信扫描下面二维码支持博主2元、5元、10元、20元等您想捐的金额吧，狠狠点击下面给点支持吧，站长非常感激您！手机微信长按不能支付解决办法：请将微信支付二维码保存到相册，切换到微信，然后点击微信右上角扫一扫功能，选择支付二维码完成支付。

【本文对您有帮助就好】元

2元

5元

10元

20元

自定义