使用Google Ajax Search with Jsonp 构建纯Javascript站内搜索

本篇日志由AlloVince在August 07 2008 06:32:57发表
YD的程序员葛阁 | 永久链接
日志未经声明，均为原创，版权遵循『创作共用 Creative Commons 』协议

目录 [折叠]

最简单的Google Jsonp搜索
最简单的Google Jsonp本地搜索
更多问题

利用Google AJAX Search可以很快的建立起一个本地搜索，关于构建的方法，Google docs里已经有详细的讲述，也并非本文的重点。

利用Google的函数库，不可避免的要嵌入远端文件，数据样式也是经过处理後的。有些时候，由于种种条件限制，我们需要更加灵活轻便的解决方案，这时候就需要借助Google Ajax Search中的Jsonp协议。

最简单的Google Jsonp搜索

在Flash and other Non-Javascript Environments一节中，可以了解到，如果对

http://ajax.googleapis.com/ajax/services/search/web?v=1.0

发送Get请求，就能返回相应的Jsonp格式数据，比起标准API来，这里的数据不携带任何冗余信息，可以很方便的处理和调用。例如使用JQuery，短短几行代码就可以实现Ajax的搜索引擎。

首先当然要有一个搜索表单

<form class="googlesearch" action="http://www.google.com/search" onsubmit="search(this);return false;">
	<div id="search_box">
			<input id="searchvalue" value="" name="q" />
			<input id="searchsubmit" type="submit" value="搜索" />
	</div>
</form>

然后是表单提交时调用的Js函数

function search(form){
	$.ajax({
		url:'http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=' + encodeURIComponent(form.q.value),
		dataType : 'jsonp',
		success: function(json){
			var res = '';
			for(var i in json.responseData.results){
				for(var j in json.responseData.results[i]){
					res = res + j + ':' + json.responseData.results[i][j] + "\n";
				}
			}
			alert(res);
		}
	});
}

可以查看做好的Demo，点击搜索，会弹出google的返回的搜索结果。

最简单的Google Jsonp本地搜索

仅仅这些，还不能满足一个构成本地搜索的条件。在标准API中，可以通过

var siteSearch = new GwebSearch();
siteSearch.setUserDefinedLabel("allo.ave7.net");
siteSearch.setUserDefinedClassSuffix("siteSearch");

来实现对特定域名"allo.ave7.net"的检索，jsonp中怎么实现相同的功能？只能通过增加查询关键词"site:allo.ave7.net"来达到目的。即在上文的url部分改为

url:'http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=' + encodeURIComponent(form.q.value) + '+site%3Aallo.ave7.net',

来看看最简单的本地搜索：Demo。在这个Demo里，所有检索出的数据都限定在域名allo.ave7.net里。

使用Google Ajax Search with Jsonp 构建纯Javascript站内搜索