Google Ajax Search API的基本使用方法
Google Search API
参考书籍：Google API大全—编程?开发?实例
书籍对几十种Google常用API进行了梳理和介绍，辅以行之有效的代码实例
http://code.google.com/intl/zh-CN/apis/ajaxsearch/documentation/
1）Google Site Search
Google站点内嵌搜索的使用方法
<%@ page language="java" contentType="text/html; charset=GBK"%>
<html>
<head>
<title>首页</title>
</head>
<body>
站内全文搜索，谷歌合作提供
<!-- SiteSearch Google -->
<form method="get" action="http://www.google.com/custom"
target="google_window">
<table border="0" bgcolor="#ffffff">
<tr>
<td nowrap="nowrap" valign="top" align="left" height="32"></td>
</tr>
<tr>
<td nowrap="nowrap"><input type="hidden" name="domains"
value="njmars.net"></input> <label for="sbi" style="display: none">输入您的搜索字词</label>
<input type="text" name="q" size="20" maxlength="255" value=""
id="sbi"></input> <label for="sbb" style="display: none">提交搜索表单</label>
<input type="submit" name="sa" value="Google 搜索" id="sbb"></input></td>
</tr>
</table>
</form>
</body>
</html>
百度的方法类似：
<%@ page language="java" contentType="text/html; charset=GBK"%>
<html>
<head>
<title>首页</title>
</head>
<body>
站内全文搜索，百度合作提供
<br>
<iframe id="baiduframe" marginwidth="0" marginheight="0" scrolling="no"
framespacing="0" vspace="0" hspace="0" frameborder="0" width="230"
height="45"
src="http://unstat.baidu.com/bdun.bsc?tn=zw80_pg&cv=0&cid=1058043&csid=521&bgcr=ffffff&ftcr=000000&urlcr=0000ff&tbsz=140&insiteurl=njmars.net&defid=99">
</iframe>
</body>
</html>
2）真正利用Google Ajax API实现的元搜索
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Google AJAX Search API 实例 - 基础</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="content">正在加载...</div>
<script src="http://www.google.cn/jsapi"></script>
<script>
google.load('search', '1'); // 加载 AJAX Search API 版本 1
google.setOnLoadCallback( function(){
// 创建一个 SearchControl 实例
var searchControl = new google.search.SearchControl();
// 添加搜索服务
searchControl.addSearcher(new google.search.WebSearch());
// 绘制界面元素
searchControl.draw(document.getElementById("content"));
// 执行初始搜索
searchControl.execute("南京财经大学");
});
</script>
</body>
</html>
3）增加更多的功能：
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Google AJAX Search API</title>
</head>
<body>
<div id="content">正在加载...</div>
<script src="http://www.google.cn/jsapi"></script>
<script>
google.load('search', '1'); // 加载 AJAX Search API 版本 1
google.load("search", "1", {"language" : "zh-CN"});
google.setOnLoadCallback( function(){
// 创建一个 SearchControl 实例
var searchControl = new google.search.SearchControl();
// 依次添加几个搜索服务
searchControl.addSearcher(new google.search.WebSearch());
searchControl.addSearcher(new google.search.ImageSearch());
searchControl.addSearcher(new google.search.LocalSearch());
searchControl.addSearcher(new google.search.NewsSearch());
searchControl.addSearcher(new google.search.VideoSearch());
searchControl.addSearcher(new google.search.BookSearch());
searchControl.addSearcher(new google.search.BlogSearch());
searchControl.addSearcher(new google.search.PatentSearch());
// 绘制界面元素
searchControl.draw(document.getElementById("content"));
// 执行初始搜索
searchControl.execute("南京财经大学");
});
</script>
</body>
</html>
4）增加站点的限制搜索
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Google AJAX Search API</title>
</head>
<body>
<div id="content">正在加载...</div>
<script src="http://www.google.cn/jsapi"></script>
<script>
google.load('search', '1'); // 加载 AJAX Search API 版本 1
google.load("search", "1", {"language" : "zh-CN"});
google.setOnLoadCallback( function(){
// 创建一个 SearchControl 实例
var searchControl = new google.search.SearchControl();
var webSearch = new google.search.WebSearch();
var imageSearch = new google.search.ImageSearch();
webSearch.setSiteRestriction("njue.edu.cn");
imageSearch.setSiteRestriction("njue.edu.cn");
searchControl.addSearcher(webSearch);
searchControl.addSearcher(imageSearch);
// 绘制界面元素
searchControl.draw(document.getElementById("content"));
// 执行初始搜索
searchControl.execute("李树青");
});
</script>
</body>
</html>
5）增加对自定义Google搜索引擎的站点限定搜索
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Google AJAX Search API</title>
</head>
<body>
<div id="content">正在加载...</div>
<script src="http://www.google.cn/jsapi"></script>
<script>
google.load('search', '1'); // 加载 AJAX Search API 版本 1
google.load("search", "1", {"language" : "zh-CN"});
google.setOnLoadCallback( function(){
// 创建一个 SearchControl 实例
var searchControl = new google.search.SearchControl();
var cseWebSearch = new google.search.WebSearch();
cseWebSearch.setSiteRestriction("006070821355842093161:ztgwtr-mkbc");
searchControl.addSearcher(cseWebSearch);
// 绘制界面元素
searchControl.draw(document.getElementById("content"));
// 执行初始搜索
searchControl.execute("李树青");
});
</script>
</body>
</html>
6）使用更多的搜索内容和结果
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Google AJAX Search API</title>
</head>
<style>
fieldset {
float: left;
}
</style>
<body>
<fieldset><legend>自定义搜索引擎结果</legend>
<div id="content-cse">正在加载...</div>
</fieldset>
<fieldset><legend>Google.cn 结果</legend>
<div id="content-general">正在加载...</div>
</fieldset>
<script src="http://www.google.cn/jsapi"></script>
<script>
google.load('search', '1'); // 加载 AJAX Search API 版本 1
google.load("search", "1", {"language" : "zh-CN"});
google.setOnLoadCallback( function(){
// 创建一个 SearchControl 实例
var cseSearch = new google.search.SearchControl();
var cseWebSearch = new google.search.WebSearch();
cseWebSearch.setSiteRestriction("006070821355842093161:ztgwtr-mkbc");
var generalWebSearch = new google.search.WebSearch();
cseSearch.setResultSetSize(google.search.Search.LARGE_RESULTSET);
cseSearch .addSearcher(cseWebSearch);
cseSearch .draw(document.getElementById("content"));
var generalSearch = new google.search.SearchControl();
var generalWebSearch = new google.search.WebSearch();
generalSearch.setResultSetSize(google.search.Search.LARGE_RESULTSET);
generalSearch.addSearcher(generalWebSearch);
var drawOptions = new google.search.DrawOptions();
drawOptions.setDrawMode(GSearchControl.DRAW_MODE_TABBED);
cseSearch.draw(document.getElementById("content-cse"), drawOptions);
generalSearch.draw(document.getElementById("content-general"),
drawOptions);
// 执行初始搜索
cseSearch.execute("李树青");
generalSearch.execute("李树青");
});
</script>
</body>
</html>
7）自定义搜索页面
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Google AJAX Search API</title>
</head>
<body>
<div id="content">正在加载...</div>
<script src="http://www.google.cn/jsapi"></script>
<script>
google.load('search', '1'); // 加载 AJAX Search API 版本 1
google.load("search", "1", {"language" : "zh-CN"});
google.setOnLoadCallback( function(){
// 创建一个 SearchControl 实例
var searchControl = new google.search.SearchControl();
// 依次添加几个搜索服务
searchControl.addSearcher(new google.search.WebSearch());
searchControl.addSearcher(new google.search.ImageSearch());
searchControl.addSearcher(new google.search.LocalSearch());
searchControl.addSearcher(new google.search.NewsSearch());
searchControl.addSearcher(new google.search.VideoSearch());
searchControl.addSearcher(new google.search.BookSearch());
searchControl.addSearcher(new google.search.BlogSearch());
searchControl.addSearcher(new google.search.PatentSearch());
// 绘制界面元素
var tabbedDraw = new google.search.DrawOptions();
tabbedDraw.setDrawMode(google.search.SearchControl.DRAW_MODE_TABBED);
searchControl.draw(document.getElementById("content"), tabbedDraw);
// 执行初始搜索
searchControl.execute("南京财经大学");
});
</script>
</body>
</html>
8）将搜索框和搜索结果分开的设计方法
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Google AJAX Search API</title>
</head>
<body>
<div id="googlesearchresult"></div><!--表示结果在这里显示-->
<p>
<hr>
<div id="googlesearchcontrol"></div><!--表示搜索框在这里显示-->
<script src="http://www.google.cn/jsapi"></script>
<script>
google.load('search', '1'); // 加载 AJAX Search API 版本 1
google.load("search", "1", {"language" : "zh-CN"});
google.setOnLoadCallback( function(){
var searchControl = new google.search.SearchControl();
var webSearch = new google.search.WebSearch();
webSearch.setUserDefinedLabel("新的风格");
searchControl.addSearcher(webSearch );
var drawOptions = new google.search.DrawOptions();
drawOptions.setDrawMode(google.search.SearchControl.DRAW_MODE_TABBED);
drawOptions.setSearchFormRoot(document.getElementById("googlesearchcontrol"));//放置搜索框的位置
searchControl.setResultSetSize(google.search.Search.SMALL_RESULTSET);//设置搜索结果显示大小，有大（显示8条）和小（显示4条）之分
searchControl.draw(document.getElementById("googlesearchresult"), drawOptions);//设置搜索结果和选项
searchControl.execute("南京财经大学");
});
</script>
</body>
</html>
9）使用CSS格式化网页内容方法之一
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Google AJAX Search API</title>
</head>
<body>
<div id="googlesearchresult" style="width:300px ; background-color:PINK"></div><!--表示结果在这里显示-->
<p>
<hr>
<div id="googlesearchcontrol" style="width:300px ; background-color:#00FFCC ; position:absolute ;left:350px"></div><!--表示搜索框在这里显示-->
<script src="http://www.google.cn/jsapi"></script>
<script>
google.load('search', '1'); // 加载 AJAX Search API 版本 1
google.load("search", "1", {"language" : "zh-CN"});
google.setOnLoadCallback( function(){
var searchControl = new google.search.SearchControl();
var webSearch = new google.search.WebSearch();
webSearch.setUserDefinedLabel("新的风格");
searchControl.addSearcher(webSearch );
var drawOptions = new google.search.DrawOptions();
drawOptions.setDrawMode(google.search.SearchControl.DRAW_MODE_TABBED);
drawOptions.setSearchFormRoot(document.getElementById("googlesearchcontrol"));//放置搜索框的位置
searchControl.setResultSetSize(google.search.Search.SMALL_RESULTSET);//设置搜索结果显示大小，有大（显示8条）和小（显示4条）之分
searchControl.draw(document.getElementById("googlesearchresult"), drawOptions);//设置搜索结果和选项
searchControl.execute("南京财经大学");
});
</script>
</body>
</html>
使用CSS格式化网页内容方法之二
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Google AJAX Search API</title>
</head>
<style>
.gs-result
{
width:300px ;
background-color:#00FFCC
}
.gs-visibleUrl
{
font-size:22;
font-weight:bold;
width:600px ;
background-color:#FF99CC
}
</style>
<body>
<div id="googlesearchresult"></div>
<!--表示结果在这里显示-->
<p>
<hr>
<div id="googlesearchcontrol"></div>
<!--表示搜索框在这里显示-->
<script src="http://www.google.cn/jsapi"></script>
<script>
google.load('search', '1'); // 加载 AJAX Search API 版本 1
google.load("search", "1", {"language" : "zh-CN"});
google.setOnLoadCallback( function(){
var searchControl = new google.search.SearchControl();
var webSearch = new google.search.WebSearch();
webSearch.setUserDefinedLabel("新的风格");
searchControl.addSearcher(webSearch );
var drawOptions = new google.search.DrawOptions();
drawOptions.setDrawMode(google.search.SearchControl.DRAW_MODE_TABBED);
drawOptions.setSearchFormRoot(document.getElementById("googlesearchcontrol"));//放置搜索框的位置
searchControl.setResultSetSize(google.search.Search.SMALL_RESULTSET);//设置搜索结果显示大小，有大（显示8条）和小（显示4条）之分
searchControl.draw(document.getElementById("googlesearchresult"), drawOptions);//设置搜索结果和选项
searchControl.execute("南京财经大学");
});
</script>
</body>
</html>
10）自定义用户交互的行为方式
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>Google AJAX Search API 实例 - 基础</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="content">正在加载...</div>
<script src="http://www.google.cn/jsapi"></script>
<script>
google.load('search', '1'); // 加载 AJAX Search API 版本 1
google.setOnLoadCallback( function(){
// 创建一个 SearchControl 实例
var searchControl = new google.search.SearchControl();
// 添加搜索服务
searchControl.addSearcher(new google.search.WebSearch());
// 回调
searchControl.setOnKeepCallback(this, seeit, 'See it!');
// 绘制界面元素
searchControl.draw(document.getElementById("content"));
// 执行初始搜索
searchControl.execute("南京财经大学");
});
var seeit = function(result) {
var title = result.title.replace(/<[^>]*>/g, '');
url = "http://www.baidu.com/s?wd=" + title;
alert("准备打开"+url);
window.open(url);
};
</script>
</body>
</html>
11）使用JSON格式的数据
http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=ipod
12）其他一些工具
Ajax搜索API的代码生成向导——Google AJAX search API wizard
http://code.google.com/intl/zh-CN/apis/ajaxsearch/wizards.html
Ajax搜索页面的在线调试程序——Ajax APIs playground
http://code.google.com/apis/ajax/playground/?exp=search
必须先安装Chrome Frame