dyerac  
dyerac In Java
公告

日历
<2007年7月>
24252627282930
1234567
891011121314
15161718192021
22232425262728
2930311234
统计
  • 随笔 - 36
  • 文章 - 10
  • 评论 - 94
  • 引用 - 0

导航

常用链接

留言簿(5)

随笔分类(49)

随笔档案(36)

文章分类(11)

文章档案(10)

相册

dyerac

搜索

  •  

积分与排名

  • 积分 - 77945
  • 排名 - 707

最新随笔

最新评论

阅读排行榜

评论排行榜

 


题记:
   其实我这篇文章纯粹是抛砖引玉之意
   Google Ajax Search 的api使用起来并不困难,如果有高手对此不屑一顾的话,不妨回答一下我的真正用意,那就是一个出色的web api该如何设计呢? 它的体系架构是什么? 我对此有个初步的想法, 前端开发自己的js库, 调用远端的服务. 但是具体实施该如何呢? 传输方式该是如何? JSON? 自定义XML? 还是SOAP? 现在很火的REST对 web api的设计有什么影响. 还望各位高手赐教 ^_^

回到正题,看看如何用google api构建自己的ajax 搜索.

先来看看官方介绍:

The Google AJAX Search API is a Javascript library that allows you to embed Google Search in your web pages and other web applications. To use the API, you will first need to sign up for an API key, and then follow the instructions below.

The Google AJAX Search API provides simple web objects that perform inline searches over a number of Google services (Web Search, Local Search, Video Search, Blog Search, News Search, and Book SearchNew!). If your web page is designed to help users create content (e.g. message boards, blogs, etc.), the API is designed to support these activities by allowing them to copy search results directly into their messages.

This API is new, and its feature set is largely determined by active involvement of its customers. Please join us in helping to shape the API and features by participating in the Google AJAX Search API discussion group to give feedback and discuss the API.


也就是说, google ajax search api是一个js的库,用户可以很容易的用该库创造google search,并嵌入到自己的网页中
其中, 显示的搜索结果是使用ajax方式局部刷新,这就是 ajax search.

另外该库提供了非常丰富的方法用于各种类型的搜索: 搜索网页 新闻 博客 视频 Local 书籍等等.

注意: 使用之前 你必须得到一个google的许可(本文例子中的许可是无效的)

下面是使用的一个示范:
snapshot:




code:
<%@ page language="java" pageEncoding="utf8"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    
<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" />
        
<style type="text/css">

    body 
{
      background-color
: white;
      color
: black;
      font-family
: Arial, sans-serif;
      font-size
: small;
      margin
: 15px;
    
}


    .gsc-control 
{ width : 400px; }


    
</style>
        
<script
            
src=http://www.google.com/uds/api?file=uds.js&v=1.0&source=uds-nbw&key=ABQIAAAA7z8-MRw3_j1ARxWWDiTXVhSrOPdqeecPZI9yWXVvOSTDE_N24BSQU0934cBfpy8j36zzYzSBH
            type
="text/javascript"></script>
        
<script 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);
      
      
//限制搜索的起始点 即站内搜索
      var siteSearch = new GwebSearch();
      siteSearch.setUserDefinedLabel(
"xuanhua.org");
      siteSearch.setUserDefinedClassSuffix(
"siteSearch");
      siteSearch.setSiteRestriction(
"xuanhua.org");
      searchControl.addSearcher(siteSearch);
      
      searchControl.addSearcher(
new GwebSearch());
      searchControl.addSearcher(
new GvideoSearch());
      searchControl.addSearcher(
new GblogSearch());
      searchControl.addSearcher(
new GnewsSearch());
      searchControl.addSearcher(
new GbookSearch());

      
// Set the Local Search center point
      // localSearch.setCenterPoint("New York, NY");

      
// tell the searcher to draw itself and tell it where to attach
     // create a drawOptions object
      var drawOptions = new GdrawOptions();

     
// tell the searcher to draw itself in linear mode
      drawOptions.setDrawMode(GSearchControl.DRAW_MODE_TABBED);
      searchControl.draw(document.getElementById(
"searchcontrol"), drawOptions);

      
// execute an inital search
      searchControl.execute("bsbs");
    }

    GSearch.setOnLoadCallback(OnLoad);

    
//]]>
    
</script>

    
</head>

    
<body>
        
<f:view>
        This is my JSF JSP page. 
<br>
            
<div id="searchcontrol" align="justify">
                Loading
            
</div>
        
</f:view>
    
</body>
</html>



如上, 页面加载的时候,将调用onLoad()方法, 该方法设置了搜索组件的属性并且在页面渲染.
见onLoad()方法
GSearchControl 是核心类,用来管理各种类型的搜索.
每种搜索对应不同的类 如上就使用了
      searchControl.addSearcher(new GwebSearch());
      searchControl.addSearcher(new GvideoSearch());
      searchControl.addSearcher(new GblogSearch());
      searchControl.addSearcher(new GnewsSearch());
      searchControl.addSearcher(new GbookSearch());
分别加载了网页 视频 博客 新闻 和书籍的搜索
这些搜索子组件通过addSearcher方法加载到searchControl中
(可以想像searchControl是一个JFrame 其他的是swing别的组件)

每个搜索子组件可以进行属性设置,在这里,我们初始化了一个页面搜索子组件
自定义其显示标签为"xuanhua.org" 同时限制其搜索范围在xuanhua.org中(即做站内搜索)

      var siteSearch = new GwebSearch();
      siteSearch.setUserDefinedLabel("xuanhua.org");
      siteSearch.setUserDefinedClassSuffix("siteSearch");
      siteSearch.setSiteRestriction("xuanhua.org");
      searchControl.addSearcher(siteSearch);

另外 也可以设置整个搜索组件的样式 即searchControl的显示方式
设置方法是通过传入一个drawOptions
以下方法将searchControl显示成tabbedPane装(默认是linear),并把它绘制在名为searchcontrol的div中

      var drawOptions = new GdrawOptions();

     // tell the searcher to draw itself in TABBED mode
      drawOptions.setDrawMode(GSearchControl.DRAW_MODE_TABBED);
      searchControl.draw(document.getElementById("searchcontrol"), drawOptions);

同时 可以通过api调用让搜索组件进行自动查询:
     查询字段为"bsbs"
    searchControl.execute("bsbs");

最后记得设置
    GSearch.setOnLoadCallback(OnLoad);
    这样页面加载的时候会自动调用onLoad()方法.


Google Ajax Search 还有许多强大的设置 这里就不多说了 详细的可以看官方网站.
http://code.google.com/apis/ajaxsearch/documentation/

顺便说一下 当初我看这个只是为了做站内搜索 找了半天发现只有ajax搜索 没有普通搜索的api
最后发现.....其实写一个表格就完事了...

<form method="get" action="http://www.google.com/search">
                
<table bgcolor="#FFFFFF">
                    
<tr>
                        
<td>
                            
<href="http://www.google.com/"> <img
                                    
src="http://www.google.com/logos/Logo_40wht.gif" border="0"
                                    alt
="Google"> </a>
                        
</td>
                        
<td>
                            
<input type=text name=q size=31 maxlength=255 value="" />
                            
<input type=hidden name=ie value=GB2312 />
                            
<input type=hidden name=oe value=GB2312 />
                            
<input type=hidden name=hl value=zh-CN />
                            
<input type=submit name=btnG value="Google 搜索" />
                            
<font size="-1"> <input type=hidden name=domains
                                    
value="www.xuanhua.org" /> <input type=radio name=sitesearch
                                    
value="www.xuanhua.org" checked>www.xuanhua.org </font>
                        
</td>
                    
</tr>
                
</table>
            
</form>


posted on 2007-07-25 17:52 dyerac in java... 阅读(1909) 评论(0)  编辑  收藏 所属分类: ajax原创文章JavaEE

只有注册用户登录后才能发表评论。


网站导航:
 
 
Copyright © dyerac in java... Powered by: 博客园 模板提供:沪江博客