利用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里。

更多问题

就像前面的本地搜索一样,开发往往要需要很多可以设置的参数,比起标准API来,Jsonp只能通过url传达设定,能预设的参数不够丰富。具体的参数可以参看Flash and other Non-Javascript Environments一节,需要注意的一些问题有:

  • 分页的实现:Jsonp只返回前4页以及总记录数,事实上如果发送第四页以后的请求,仍然能够获得正确的回应,只是分页函数要自己写了。
  • 每页的条目数:这个设定比较苛刻,只能通过rsz=small/large来获得每页4条/8条的数据,可能是Jsonp最不方便之处了。
  • 结果的过滤:Google Web搜索会自动过滤一些可能重复的项目,留意观察一下google的搜索参数,是通过filter=0/1开关的。但在Jsonp的响应中,对第一页的请求,过滤是关闭的,第二页以后则又自动打开了。不算是大问题,但会让分页的现实变得很奇怪。虽然文档中提到可以通过safe=active/moderate/off来改变过滤,但写入这个参数后并没有影响到检索结果。希望知情人士告知问题所在。

最后将allo.ave7.net的本地搜索单独抽出做成Demo,也可以下载本次的全部源代码


 Tags : YD的程序员葛阁 jQuery javascript JSONP Google Search

Donate:Buy me a coffee  | 文章有帮助,可以请我喝杯咖啡