使用jQuery解析RSS
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用jQuery解析RSS相关的知识，希望对你有一定的参考价值。
我想使用jQuery来解析RSS提要。这可以通过开箱即用的基础jQuery库完成，还是需要使用插件？
警告
The Google Feed API已被正式弃用，不再有效！
不需要整个插件。这会将您的RSS作为JSON对象返回给回调函数：
function parseRSS(url, callback) {
$.ajax({
url: document.location.protocol + '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&callback=?&q=' + encodeURIComponent(url),
dataType: 'json',
success: function(data) {
callback(data.responseData.feed);
}
});
}
I agree with @Andrew，使用Google是一种可靠的，可重复使用的方法，可以获得JSON而不是XML的巨大好处。使用Google作为代理的另一个好处是，可能阻止您直接访问其数据的服务不太可能阻止Google。以下是使用滑雪报告和条件数据的示例。这包含所有常见的实际应用程序：1）第三方RSS / XML 2）JSONP 3）当您无法以您希望的方式获取数据时清理字符串和字符串到数组4）在加载时添加元素到DOM。希望这有助于一些人！
<!-- Load RSS Through Google as JSON using jQuery -->
<script type="text/javascript">
function displaySkiReport (feedResponse) {
// Get ski report content strings
var itemString = feedResponse.entries[0].content;
var publishedDate = feedResponse.entries[0].publishedDate;
// Clean up strings manually as needed
itemString = itemString.replace("Primary: N/A", "Early Season Conditions");
publishedDate = publishedDate.substring(0,17);
// Parse ski report data from string
var itemsArray = itemString.split("/");
//Build Unordered List
var html = '<h2>' + feedResponse.entries[0].title + '</h2>';
html += '<ul>';
html += '<li>Skiing Status: ' + itemsArray[0] + '</li>';
// Last 48 Hours
html += '<li>' + itemsArray[1] + '</li>';
// Snow condition
html += '<li>' + itemsArray[2] + '</li>';
// Base depth
html += '<li>' + itemsArray[3] + '</li>';
html += '<li>Ski Report Date: ' + publishedDate + '</li>';
html += '</ul>';
$('body').append(html);
}
function parseRSS(url, callback) {
$.ajax({
url: document.location.protocol + '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&callback=?&q=' + encodeURIComponent(url),
dataType: 'json',
success: function(data) {
callback(data.responseData.feed);
}
});
}
$(document).ready(function() {
// Ski report
parseRSS("http://www.onthesnow.com/michigan/boyne-highlands/snow.rss", displaySkiReport);
});
</script>
jFeed有点过时，只适用于旧版本的jQuery。自更新以来已有两年了。
zRSSFeed可能不太灵活，但它易于使用，并且它适用于当前版本的jQuery（目前为1.4）。 http://www.zazar.net/developers/zrssfeed/
以下是zRSSFeed文档的快速示例：
<div id="test"><div>
<script type="text/javascript">
$(document).ready(function () {
$('#test').rssfeed('http://feeds.reuters.com/reuters/oddlyEnoughNews', {
limit: 5
});
});
</script>
我正在使用jquery和yql作为feed。你可以用yql检索twitter，rss，buzz。我从http://tutorialzine.com/2010/02/feed-widget-jquery-css-yql/读到。这对我来说非常有用。
<script type="text/javascript" src="./js/jquery/jquery.js"></script>
<script type="text/javascript" src="./js/jFeed/build/dist/jquery.jfeed.pack.js"></script>
<script type="text/javascript">
function loadFeed(){
$.getFeed({
url: 'url=http://sports.espn.go.com/espn/rss/news/',
success: function(feed) {
//Title
$('#result').append('<h2><a href="' + feed.link + '">' + feed.title + '</a>' + '</h2>');
//Unordered List
var html = '<ul>';
$(feed.items).each(function(){
var $item = $(this);
//trace( $item.attr("link") );
html += '<li>' +
'<h3><a href ="' + $item.attr("link") + '" target="_new">' +
$item.attr("title") + '</a></h3> ' +
'<p>' + $item.attr("description") + '</p>' +
// '<p>' + $item.attr("c:date") + '</p>' +
'</li>';
});
html += '</ul>';
$('#result').append(html);
}
});
}
</script>
我建议你使用FeedEk。 Google Feed API正式弃用后，大多数插件都无效。但FeedEk仍在运作。它非常易于使用，并有许多自定义选项。
$('#divRss').FeedEk({
FeedUrl:'http://jquery-plugins.net/rss'
});
有选项
$('#divRss').FeedEk({
FeedUrl:'http://jquery-plugins.net/rss',
MaxCount : 5,
ShowDesc : true,
ShowPubDate:true,
DescCharacterLimit:100,
TitleLinkTarget:'_blank',
DateFormat: 'MM/DD/YYYY',
DateFormatLang:'en'
});
使用谷歌缓存的google ajax api和您想要的任何输出格式。
代码示例; http://code.google.com/apis/ajax/playground/#load_feed
<script src="http://www.google.com/jsapi?key=AIzaSyA5m1Nc8ws2BbmPRwKu5gFradvD_hgq6G0" type="text/javascript"></script>
<script type="text/javascript">
/*
* How to load a feed via the Feeds API.
*/
google.load("feeds", "1");
// Our callback function, for when a feed is loaded.
function feedLoaded(result) {
if (!result.error) {
// Grab the container we will put the results into
var container = document.getElementById("content");
container.innerHTML = '';
// Loop through the feeds, putting the titles onto the page.
// Check out the result object for a list of properties returned in each entry.
// http://code.google.com/apis/ajaxfeeds/documentation/reference.html#JSON
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
var div = document.createElement("div");
div.appendChild(document.createTextNode(entry.title));
container.appendChild(div);
}
}
}
function OnLoad() {
// Create a feed instance that will grab Digg's feed.
var feed = new google.feeds.Feed("http://www.digg.com/rss/index.xml");
// Calling load sends the request off. It requires a callback function.
feed.load(feedLoaded);
}
google.setOnLoadCallback(OnLoad);
</script>
zRSSfeed建立在jQuery之上，简单的主题非常棒。 试试看。
The jQuery-rss project非常轻巧，并没有强加任何特定的造型。
语法可以很简单
$("#rss-feeds").rss("http://www.recruiter.com/feed/career.xml")
看到working example at http://jsfiddle.net/jhfrench/AFHfn/
jQuery Feeds是一个不错的选择，它有一个内置的模板系统并使用Google Feed API，因此它具有跨域支持。
使用ajax/jquery解析wordpress RSS提要