-- 作者:admin
-- 发布时间:2010/5/23 21:53:14
-- 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" c%>
<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" c%>
<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" c /> <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" c /> <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" c /> <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" c /> <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" c /> <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" c /> <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" c /> <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" c /> <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" c /> <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" c /> <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
[此贴子已经被作者于2010-12-14 09:50:15编辑过]
|