当前位置:首页 > 网站制作 > 正文内容

用Yahoo Pipes和jQuery做一个RSS挂件

admin15年前 (2010-06-02)网站制作366
如果我们希望把一个网站的更新实时发布到另一个网站上,最好的方法是通过 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></ul>
	<div>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。 转载来自: http://blog.imbolo.com/create-a-simple-ajax-rss-widget-with-jquery-and-yahoo-pipes/

扫描二维码推送至手机访问。

版权声明:本文由博赚恋吧资源站发布,如需转载请注明出处。

本文链接:https://432l.com/post/2754.html

标签: Web20
分享给朋友:

相关文章

戳穿网赚虚假广告以及防骗技巧

        骗术拆解: 目前骗子广告联盟非常多,像王鑫这样被骗的案例也不在少数。价高、挂马、拒付、扣量、K号、支付周期短等手段是骗子广告联盟常用的手段,本案例中,涉及了价高、挂马、拒付、扣量、支付周期短等骗术,该联盟提供的图片类广告、文字类广告、弹窗类广告比同类正规的广告联盟高(一般10元/千IP)。    &nb...

z-blog 显示评论者的网站链接

在 Z-BLOG 的博客中,有一些模板默认是不显示评论者的网站地址链接的,这样我们要回访起来就比较麻烦。那么我们自己动手修改模板,让它显示链接地址。在修改模板之前,我们先来了解一下相关的文件及数据。1、b_article_comment.html  每条评论内容显示模板;        2、<#article/c...

恋吧推荐的20个最好的免费音乐分享网站

20个最好的免费音乐分享网站 FinetuneGrooveshark Imeem Jango JukeFly Last.fm Musicoveryhttp://musicovery.com/可以设置你的心情和音乐类型,然后可以播放相应的音乐。详细介绍。MySpace Pandora SkreemR 以上部分来源:CnM...

恋吧发现并推荐一个华丽的Blog Widgets服务—Wowzio

首先输入你的 Blog Feed 地址,Wowzio 就会自动从 Blog 文章中提取出文字、图片,生成 6 种效果华丽的 Widgets 供你选择。并且 Widgets 的颜色和尺寸都是可以自定义的,这可以让 Widgets 和 Blog 的风格趋于一致。这 6 种Widgets 分别是(点击链接可查看具体效果)——Panoramic Slideshow、SlideShow、Photo Gall...

TwitterForBusyPeople:适合大忙人的twitter第三方应用

TwitterForBusyPeople故名思意就是专门为那些比较忙的人提供的一个twitter第三方服务。只要你输入你的Twitter用户名(无需密码),就可以查看你Follow的好友的更新情况,并且按照最后一次更新的时间进行分类,包括在1小时内更新的好友,过去一天内更新的好友,一天之前更新的好友。鼠标悬停在好友头像上,可以查看其最新的一条tweets。很显然,如果你忙的好几天才能上一次twti...

KnowEm.com:查询用户名是否注册

 网站介绍:社交网站SNS至今仍是Web2.0领域的热点,以至于很多品牌或者公司都希望借助这个平台,进行一些推广或者研究。有一个前提就是:用户名。如果一一手动地去每个SNS社交网站注册,是个非常麻烦的过程。 幸运的是今天要介绍的KnowEm.com(类似的网站还有:NameChk)致力于这样的服务:帮助用户在120个不同类型的社交网站和媒体SNS进行查询,看自己输入的用户名(比...

评论列表

my heart beats for love lyrics
15年前 (2010-06-03)

Awesome post, hey I came across this post while searching for free lyrics. Thanks for sharing I'll email my friends about this too.

bolo
15年前 (2010-06-04)

转载请注明原文地址

admin 回复:
不好意思,已加
15年前 (2010-06-04)

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。