Google Ajax Search API的基本使用方法

时间：2022-08-22 11:07:25

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

标签：

相关文章