题记:
其实我这篇文章纯粹是抛砖引玉之意
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>
<a 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>