登录
当前位置： 首页 > 工具软件 > Google AJAX 搜索 API > 使用案例 >

Google Ajax Search API的基本使用方法

丁俊爽
2023-12-01

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

 类似资料：

相关阅读

python中update的基本使用方法详解mysql中find_in_set函数的基本使用方法详解python中的json的基本使用方法Java JDBC基本使用方法详解Python lxml模块的基本使用方法分析

相关文章

2.5.4 AutoCompleteTextView(自动完成文本框)的基本使用2.5.5 ExpandableListView(可折叠列表)的基本使用2.5.3 Spinner(列表选项框)的基本使用1.5.1 Git使用教程之本地仓库的基本操作2.6.0 其他几种常用对话框基本使用

相关问答

使用RestTemplateBuilder的Spring BootRestTemplate基本身份验证使用RestTemplate的Spring 4.0.0基本身份验证使用KeyClope启用基本身份验证无法使用Debootstrap创建docker基本映像Laravel-无法再使用基本身份验证

相关文档

网络基本功系列Knative入门 构建基于 Kubernetes 的现代化 Serverless 应用计算机科学的基础常用算法实现方法Keras 基于 Python 的深度学习库
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.