利用Yahoo Pipes和jQuery做一个RSS挂件
来源:Bolo的博客 发布时间:2010-06-08 13:40:00
如果我们希望把一个网站的更新实时发布到另一个网站上,最好的方法是通过 RSS 进行转载。如果只是需要简单的对更新的条目做个提示的话,使用 JavaScript 是最可行的方法。但是通过 JavaScript 解析一个 XML 文档十分麻烦。幸好 Yahoo Pipes 为我们提供了非常好的 RSS to JSON 功能,我们可以先把 RSS 转换成 JSON 再用 JavaScript 进行解析,这样比直接解析 XML 简单得多!
把 RSS 转换成 JSON
首先登录 http://pipes.yahoo.com ,新建一个 Pipe ( Creat a Pipe ) 。然后在左边的工具里选择 Sources > Fetch Feed ,在输入框里输入一个 RSS 地址。再用线把 Fetch Feed 和 Pipe Output 两个框框连起来(如右图),保存这个 Pipe,然后点击顶部的 Run Pipe… 。点击 Publish 发布这个 Pipe ,然后记下 Get as JSON 的 URL。简单几步就已经把一个 RSS 转换成 JSON 了,而且这个 JSON 会根据 RSS 的更新自动更新。
通过 jQuery 解析 JSON
jQuery 本身为我们提供了一个 getJSON() 函数,为我们解析 JSON 提供简单快捷的方法。
由于我希望做一个 AJAX 载入项目的效果,我先做一个 HTML 框架,然后通过 jQuery 的 append 方法把解析出来的内容添加到指定的容器里。HTML框架如下:
<div id="rssdata"> <ul class="rss-items"></ul> <div class="loading">Loading RSS items...</div></div><p>然后编写 jQuery 调用:</p>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><script type="text/javascript">$('#rssdata').ready(function() { // JSON 地址 = 刚才记下的 URL + &_callback=? var pipe_url = 'http://pipes.yahoo.com/pipes/pipe.run?_id=90caf3b6ba8f36459a3137248b47620e&_render=json&_callback=?'; $.getJSON(pipe_url,function(data) { // 遍历 JSON 项目,并且确定输出哪些信息 $(data.value.items).each(function(index,item) { var item_html = '<li><a href="'+item.link+'">'+item.title+'</a></li>'; // 把输出的内容插入页面里 $('#rssdata ul.rss-items').append(item_html); }); // 添加条目载入效果 $('#rssdata div.loading').fadeOut(); $('#rssdata ul.rss-items').slideDown(); });});</script>
当然要页面美观的话,写一些 CSS 是必要的,这个可以随自己的喜好而定。最终的效果可以看这个 DEMO。
猜你喜欢
- 搞了一上午,头都大了!最终解决问题。其实这问题老早就遇上了,但是比较懒,三下两下没整好便推开了搜索了一下,产生< msxml3.dll
- 最近在做个大数据量的录入,为了方便客户输入,需要通过方向键来移动到输入框中,本代码仅供学习、研究,请勿用于其它用途:D下面贴的代码只是贴出来
- MaxDB和MySQL是独立的数据库管理服务器。系统间的协同性是可能的,通过相应的方式,系统能够彼此交换数据。要想在MaxDB和MySQL之
- ASP实例代码,利用SQL语句动态创建Access表。留作参考,对在线升级数据库有用处.<% nowtime = now()
- 1. 用Dreamweaver 4.0制作闪动的Flash按钮选择菜单Insert→Interactive Images→Flash But
- 问:怎样实现ORACLE中用一条SQL实现其它进制到十进制的转换?答:具体示例如下:-----二进制转换十进制---------------
- ASP 本身不支持动态包含文件,现在的动态包含是通过 FSO 把被包含的文件合并到主文件里再运行。以下也有把形如 <!--#
- 用ASP生成XBM数字图片(可用来生成验证码)XBM图片是一个纯文本的文件,可以用ASP来自动生成。可以用它来使用网站登陆的验证码;我们用记
- <% Function XMLEncode(byVal sText) sText = Replace(sText, "&am
- 本文的目的是探讨JS相关技术,并不是以杀毒为主要目的,杀毒只是为讲解一些JS做铺垫的,呵呵,文章有点长,倒杯咖啡或者清茶慢慢看,学习切勿急躁
- 但是,具有identity特性的字段,不需要具有唯一性,更不必须是主键。 可以通过,set identity_insert tablenam
- class test { &nbs
- 客户强烈要求使用淘宝的首页商品分类效果,很BT~,没辙就满足一下人家的需求。通过淘宝案例,立即想到了显示/隐藏层的效果,于是在DW中画了几个
- 于是我登陆主机的管理面板,重启了网站服务,ldb文件就消失了,网站打开也正常了,但过了数小时后,网站又再次出现以上情况,此种情况持续了好一段
- 看了山人表单验证,又看了其他一些验证程序和相关的一些参考资料,写出了一个比较简洁的js表单验证程序。特点是扩展容易,可以方便的添加自己需要的
- 在最近的一次调试中,出现如下错误~·错误类型:ADODB.Recordset (0x800A0E7D)连接无法用于执行此操作。在此上下文中它
- 我的测试环境是2000sever ie6.0+sp4 MYIE1.31 (成功通过测试)关闭窗口的途径常用4种:1.双击左上角图标2.直接双
- 当讨论Request对象内容时,要研究的集合之一就是ServerVariables集合。这个集合包含了两种值的结合体,一种是随同
- 在“按需加载”的需求中,我们经常会判断当脚本加载完成时,返回一个回调函数,那如何去判断脚本的加载完成呢?我们可以对加载的 JS 对象使用 o
- 下面是IN条件运算符的SQL语句:SELECT column1, SUM(column2) FROM&nbs