題記:
其實我這篇文章純粹是拋磚引玉之意
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>