kissy+ Google’s AJAX Search API实战ajax搜索

转自：http://www.36ria.com/3388

这几天明河都没发什么文章，就是在酝酿这篇文章。前段时间明河有发了七八篇的kissy教程，今天这篇是实战篇，使用kissy完成ajax搜索。

•  
• 点此下载

使用了css3，明河没在IE下调试过，不建议使用IE浏览，V1版本难免有bug，欢迎反馈，谢谢！

1、明河为什么要做这个示例？

曾几何时，明河在思考一个问题，为什么所有的搜索按钮点击完都要跳转到一个新的页面，如果点击完搜索按钮，直接在当前页面显示会是什么的效果？

幸运的是Google开放了ajax搜索的接口，通过ajax直接取搜索结果，在当前页面显示成为了可能，于是明河做了个这个例子。

2、原理说明

之所以可以实现ajax获取搜索结果，归功于Google’s AJAX Search API，需要说明的是Google’s AJAX Search API返回的结果是有带样式的，当然其也提供了接口，用户可以自定义修改搜索结果样式。明河这里并没有直接使用Google’s AJAX Search API的接口，而是利用http://ajax.googleapis.com/ajax/services/search/web，使用jsonp的方式返回纯数据的json。

比如明河的请求路径类似：

http://ajax.googleapis.com/ajax/services/search/web?v=1.0&callback=KISSY.GgSearch.CALLBACKS.jsonp1288146786000&q=site:36ria.com+jquery&rsz=4&start=0。

传递的参数说明：

• V：Google’s AJAX Search API的版本号
• callback：回调函数名
• q：关键字，如果关键字前有加site:36ria.com，意思是只在36ria.com下搜索
• rsz：每页显示条目数
• start：起始条数

那么该服务返回的json数据，类似下面结果：

KISSY.GgSearch.CALLBACKS.jsonp1288146786000({
      "responseData": {"results":[{
                           "GsearchResultClass":"GwebSearch",
                           "unescapedUrl":"http://www.36ria.com/jquery%E6%8F%92%E4%BB%B6%E5%A4%A7%E5%85%A8",
                           "url":"http://www.36ria.com/jquery%25E6%258F%2592%25E4%25BB%25B6%25E5%25A4%25A7%25E5%2585%25A8",
                           "visibleUrl":"www.36ria.com",
                           "cacheUrl":"http://www.google.com/search?q\u003dcache:aj4DjGUBg-4J:www.36ria.com",
                           "title":"\u003cb\u003ejquery\u003c/b\u003e插件大全（不断更新中） | ria之家--RIA三部曲：\u003cb\u003ejquery\u003c/b\u003e、ext、flex",
                           "titleNoFormatting":"jquery插件大全（不断更新中） | ria之家--RIA三部曲：jquery、ext、flex","content":"这里我将发表在博客上的所有\u003cb\u003ejquery\u003c/b\u003e插件做成了一个合集，方便各位朋友查看与下载。点击  文字链接就会进入下载和说明页面。如果你有什么想法与疑问，可以在此页面上留言。 \u003cb\u003e...\u003c/b\u003e"
                          }]
                       },
     "responseDetails": null, 
     "responseStatus": 200
})           

接下来就是用js来处理结果集了。

3、这个demo依赖于kissy1.1.5

明河这段时间都在练习kissy，正好利用这个机会，使用kissy实战了下，kissy很强大，也可易用，只是动画部分用的真是不习惯，目前来看还无法跟jquery相提并论，期待其未来的发展。正在学kissy的朋友，不妨看下这个demo的代码。

代码明河做了封装，明河将其命名为：KISSY.GgSearch。

关于KISSY.GgSearch配置和方法说明请详见示例页面，明河这里不再累述。

难点分析

1、如何使用Google’s AJAX Search API

留意分析Google’s AJAX Search API返回的结果集结构，这部分可以参见原理说明部分。整个过程通讯，使用的是jsonp，如果你不理解jsonp，请猛击《使用 JSONP 实现跨域通信，第 1 部分: 结合 JSONP 和 jQuery 快速构建强大的 mashup》，或看明河写的《jquery结合JSONP教程—明河谈jquery》，当然这二篇文章都是讲jsonp结合jquery的情况，但实际上其他框架结合jsonp的过程大同小异。

2、kissy中的jsonp

很遗憾，截止到kissy1.1.5，依旧没有ajax的API，但提供getScript方法，利用这个方法可以处理jsonp。

1. var url = GgSearch.API+cfg.type+'?v='+GgSearch.API_V+'&callback=KISSY.GgSearch.CALLBACKS.'+callbackName;
2. KISSY.getScript(url+'&q='+q+'&rsz='+rsz+'&start='+start);

3、请求url的处理

在原理分析中明河已经提到客户端请求的url类似：http://ajax.googleapis.com/ajax/services/search/web?v=1.0&callback=KISSY.GgSearch.CALLBACKS.jsonp1288146786000&q=site:36ria.com+jquery&rsz=4&start=0，参数是重点处理部分，比较难处理的是callback这个参数，这个回调函数名，要求是调用实例化的GgSearch的callback（）。
callback=KISSY.GgSearch.CALLBACKS.jsonp1288146786000，KISSY.GgSearch.CALLBACKS是个静态属性，用于储存回调函数，jsonp1288146786000是回调函数名，是明河使用‘jsonp’+时间戳生成的。

1. /**
2.          * 获取回调函数名
3.          */
4.         callbackName : function(){
5.             var self = this,prevfix = self.PREVFIX_CALLBACK,date = new Date(),timeStamp,fullCallbackName;
6.             timeStamp = Date.parse(date);
7.             fullCallbackName = prevfix + timeStamp;
8.             GgSearch.CALLBACKS[fullCallbackName] = function(data){
9.                 self.callback.call(self,data);
10.             };
11.             return fullCallbackName;
12.         }

留意下面的代码：

1. GgSearch.CALLBACKS[fullCallbackName] = function(data){
2.                 self.callback.call(self,data);
3.             };

调用jsonp1288146786000，实际上触发了实例化GgSearch的callback（）。
为什么要多一层这样的处理呢？明河主要考虑到this上下文的传递。

4、半透明边框的制作

这一块的内容，明河在以前的文章中已经讲解了，请猛击《使用background-clip制作半透明的边框》。

5、半透明箭头的制作

如何使用css制作箭头，明河也在以前的文章介绍过了，请猛击《
利用css中的border生成三角，兼容包括IE6的主流浏览器》。

1. <s class="triangle"><i class="bor"></i><i class="blo"></i></s>

1. /*三角*/
2. s.triangle{
3.     position:absolute;top:-24px;left:30px;z-index:200;
4.     width:30px;height:24px;overflow:hidden;
5.     padding:0px;background-color:transparent;
6. }
7. s.triangle i{width:0px; height:0px;line-height:0px !important;padding:0px;}
8. s.triangle .blo{
9.     position:absolute;left:0px;top:0px;
10.     border:12px solid;
11.     border-color:transparent transparent #fff transparent;
12.     border-style:dashed dashed solid dashed;
13. }
14. s.triangle .bor{
15.     position:absolute;left:-2px;top:-8px;
16.     border:14px solid;
17.     border-color:transparent transparent #000 transparent;
18.     border-style:dashed dashed solid dashed;
19.    
20.     filter:alpha(opacity=30);
21.     -moz-opacity:0.3;
22.     -khtml-opacity:0.3;
23.     opacity:0.3;
24.    
25. }

明河结语

有可能的话，明河会将其整成一个wordpress插件，其实ajax搜索最适合的场景就是博客搜索框。可以确定的是明河将在下一版的ria之家中加入ajax搜索。也先预告下下一版的ria之家很有可能彻底抛弃IE，因为会用到html5。