Home > Develop > 利用 Yahoo Pipes 和 jQuery 做一个 RSS 挂件
2010June . 2nd

利用 Yahoo Pipes 和 jQuery 做一个 RSS 挂件

如果我们希望把一个网站的更新实时发布到令一个网站上,最好的方法是通过 RSS 进行转载。如果只是需要简单的对更新的条目做个提示的话,使用 JavaScript 是最可行的方法。但是通过 JavaScript 解析一个 XML 文档十分麻烦。幸好 Yahoo Pipes 为我们提供了非常好的 RSS to JSON 功能,我们可以先把 RSS 转换成 JSON 再用 JavaScript 进行解析,这样比直接解析 XML 简单得多!

把 RSS 转换成 JSON

雅虎 Pipes

首先登录 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框架如下:

1
2
3
4
5
<div id="rssdata">
	<ul class="rss-items"></ul>
	<div class="loading">Loading RSS items...</div>
</div>
<p>然后编写 jQuery 调用:</p>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<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

  1. 2010June . 2nd - 9:09 AM

    yahoo pipes太高级了,但是功能超强大

  2. 2010June . 2nd - 9:10 AM

    话说你的demo编码有问题。。。

  3. 2010June . 2nd - 10:51 AM

    @万戈
    没问题啊,utf-8

  4. 2010June . 2nd - 11:43 AM

    标题还真有编码问题

  5. 2010June . 2nd - 12:18 PM

    @万戈 and @hzlzh
    在做这个DEMO时我根本没有为DEMO文件加上编码,而JSON的编码是UTF-8的,所以你的浏览器默认编码不是UTF-8的话就会乱码了。现在我已经重新修改我DEMO文件

  6. 2010June . 2nd - 12:20 PM

    @bolo
    正常鸟~

  7. 2010June . 2nd - 3:11 PM

    看不懂干嘛的路过…

  8. 2010June . 2nd - 3:11 PM

    看懂了 再次路过..

  9. 2010June . 2nd - 4:41 PM

    对于JSON 学习中 话说google搜索建议可以通过JSON获取吧?

  10. 2010June . 3rd - 9:11 PM

    Yahoo Pipes貌似会经常抽~

  11. 2010June . 3rd - 10:23 PM

    @水水
    没有研究,应该可以通过Google的AJAX Search API实现
    @Jutoy
    如果你用国外主机的话可以做一个Pipes Proxy中转

  12. 2010June . 3rd - 10:23 PM

    哥哥你寫文章好勤快。。

  13. 2010June . 3rd - 10:45 PM

    @ELL
    还快?越来越慢了,迟早边月经,再变编年史的

  14. 2010June . 3rd - 10:46 PM

    @bolo
    ( ̄_ ̄|||)
    我的部落格。。自準備考試以來,已經很久木油更新了~~~

  15. 2010June . 3rd - 10:48 PM

    @ELL
    那肯定是周期失调了

  16. 2010June . 3rd - 10:49 PM

    @bolo
    是阿~月經失調~

  17. 2010June . 3rd - 11:02 PM

    @bolo
    Google的AJAX Search API实现不了搜索建议 他的AJAX API里不包含搜索建议

  18. 2010June . 8th - 1:23 AM

    这个挂件不错哦~

  19. 2010June . 27th - 2:12 PM

    没有看懂 这个可以利用在采集并伪原创上吗

  20. 2010June . 27th - 6:18 PM
  21. 2010July . 1st - 5:01 PM

    对我这个新手来说貌似很复杂

  22. 2010July . 25th - 5:23 PM

    ^_^这个很好,学习了

Subscriber selector

Close