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

时间:2022-08-22 11:15:32

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

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

kissy+ Google’s AJAX Search API实战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、半透明箭头的制作

kissy+ Google’s AJAX Search API实战ajax搜索
如何使用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:0pxheight: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。