这几天明河都没发什么文章,就是在酝酿这篇文章。前段时间明河有发了七八篇的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。
比如明河的请求路径类似:
传递的参数说明:
- 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。
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’+时间戳生成的。
留意下面的代码:
调用jsonp1288146786000,实际上触发了实例化GgSearch的callback()。
为什么要多一层这样的处理呢?明河主要考虑到this上下文的传递。
4、半透明边框的制作
这一块的内容,明河在以前的文章中已经讲解了,请猛击《使用background-clip制作半透明的边框》。
5、半透明箭头的制作
如何使用css制作箭头,明河也在以前的文章介绍过了,请猛击《
利用css中的border生成三角,兼容包括IE6的主流浏览器》。
明河结语
有可能的话,明河会将其整成一个wordpress插件,其实ajax搜索最适合的场景就是博客搜索框。可以确定的是明河将在下一版的ria之家中加入ajax搜索。也先预告下下一版的ria之家很有可能彻底抛弃IE,因为会用到html5。