Разбор RSS с помощью jQuery
Я хочу использовать jQuery для разбора RSS-каналов. Можно ли это сделать с помощью базовой библиотеки jQuery из коробки или мне нужно будет использовать плагин?
20 ответов
ПРЕДУПРЕЖДЕНИЕ
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);
}
});
}
Используйте jFeed - плагин jQuery RSS/Atom. Согласно документации, это так же просто, как:
jQuery.getFeed({
url: 'rss.xml',
success: function(feed) {
alert(feed.title);
}
});
Для тех из нас, кто придет к дискуссии поздно, начиная с версии 1.5, jQuery имеет встроенные возможности синтаксического анализа xml, что позволяет довольно легко сделать это без плагинов или сторонних сервисов. Он имеет функцию parseXml, а также автоматически разбирает xml при использовании функции $.get. Например:
$.get(rssurl, function(data) {
var $xml = $(data);
$xml.find("item").each(function() {
var $this = $(this),
item = {
title: $this.find("title").text(),
link: $this.find("link").text(),
description: $this.find("description").text(),
pubDate: $this.find("pubDate").text(),
author: $this.find("author").text()
}
//Do something with item here...
});
});
jFeed не работает в IE.
Используйте zRSSFeed. Работало ли это за 5 минут
Вы также можете использовать jquery-rss, который поставляется с хорошими шаблонами и очень прост в использовании:
$("#your-div").rss("http://www.recruiter.com/feed/career.xml", {
limit: 3,
layoutTemplate: '<ul class="inline">{entries}</ul>',
entryTemplate: '<li><a href="{url}">[{author}@{date}] {title}</a><br/>{shortBodyPlain}</li>'
})
урожайность (по состоянию на 18 сентября 2013 г.):
<div id="your-div">
<ul class="inline">
<entries></entries>
</ul>
<ul class="inline">
<li><a href="http://www.recruiter.com/i/when-to-go-over-a-recruiter%e2%80%99s-head/">[@Tue, 10 Sep 2013 22:23:51 -0700] When to Go Over a Recruiter's Head</a><br>Job seekers tend to have a certain "fear" of recruiters and hiring managers, and I mean fear in the reverence and respect ...</li>
<li><a href="http://www.recruiter.com/i/the-perfect-job/">[@Tue, 10 Sep 2013 14:52:40 -0700] The Perfect Job</a><br>Having long ago dealt with the "perfect resume" namely God's, in a previous article of mine, it makes sense to consider the ...</li>
<li><a href="http://www.recruiter.com/i/unemployment-benefits-applications-remain-near-5-year-low-decline-again/">[@Mon, 09 Sep 2013 12:49:17 -0700] Unemployment Benefits Applications Remain Near 5-Year Low, Decline Again</a><br>As reported by the U.S. Department of Labor, the number of workers seeking unemployment benefits continued to sit near ...</li>
</ul>
</div>
См. http://jsfiddle.net/jhfrench/AFHfn/ для рабочего примера.
function getFeed(sender, uri) {
jQuery.getFeed({
url: 'proxy.php?url=' + uri,
success: function(feed) {
jQuery(sender).append('<h2>'
+ '<a href="'
+ feed.link
+ '">'
+ feed.title
+ '</a>'
+ '</h2>');
var html = '';
for(var i = 0; i < feed.items.length && i < 5; i++) {
var item = feed.items[i];
html += '<h3>'
+ '<a href="'
+ item.link
+ '">'
+ item.title
+ '</a>'
+ '</h3>';
html += '<div class="updated">'
+ item.updated
+ '</div>';
html += '<div>'
+ item.description
+ '</div>';
}
jQuery(sender).append(html);
}
});
}
<div id="getanewbrowser">
<script type="text/javascript">
getFeed($("#getanewbrowser"), 'http://feeds.feedburner.com/getanewbrowser')
</script>
</div>
Используйте Google AJAX Feed API, если ваши данные RSS не являются частными. Это быстро, конечно.
ОБНОВЛЕНИЕ [ 25.04.2016 ] Теперь лучше написанная и полностью поддерживаемая версия с большим количеством опций и возможностей, размещенная на GitHub.jQRSS
Я видел " Выбранный ответ " Nathan Strutz, однако ссылка на страницу плагина jQuery все еще не работает, и домашняя страница этого сайта, похоже, не загружалась. Я попробовал несколько других решений и обнаружил, что большинство из них не только устарели, но и ЛЕГКО! Таким образом, я выбросил свою шляпу туда и сделал свой собственный плагин, и с мертвыми ссылками здесь, это похоже на отличное место, чтобы представить ответ. Если вы ищете этот ответ в 2012 году (вскоре до 2013 года), вы можете заметить разочарование от мертвых ссылок и старых советов, как и я. Ниже приведена ссылка на мой пример современного плагина, а также код для плагина! Просто скопируйте код в файл JS и свяжите его в своем заголовке, как и любой другой плагин. Использование ЧРЕЗВЫЧАЙНО EZ!
jsFiddle
Код плагина
9.02.2015 - сделано долгожданное обновление для проверкиconsoleперед отправкой команд на него! Должно помочь с более старыми проблемами IE.
(function($) {
if (!$.jQRSS) {
$.extend({
jQRSS: function(rss, options, func) {
if (arguments.length <= 0) return false;
var str, obj, fun;
for (i=0;i<arguments.length;i++) {
switch(typeof arguments[i]) {
case "string":
str = arguments[i];
break;
case "object":
obj = arguments[i];
break;
case "function":
fun = arguments[i];
break;
}
}
if (str == null || str == "") {
if (!obj['rss']) return false;
if (obj.rss == null || obj.rss == "") return false;
}
var o = $.extend(true, {}, $.jQRSS.defaults);
if (typeof obj == "object") {
if ($.jQRSS.methods.getObjLength(obj) > 0) {
o = $.extend(true, o, obj);
}
}
if (str != "" && !o.rss) o.rss = str;
o.rss = escape(o.rss);
var gURL = $.jQRSS.props.gURL
+ $.jQRSS.props.type
+ "?v=" + $.jQRSS.props.ver
+ "&q=" + o.rss
+ "&callback=" + $.jQRSS.props.callback;
var ajaxData = {
num: o.count,
output: o.output,
};
if (o.historical) ajaxData.scoring = $.jQRSS.props.scoring;
if (o.userip != null) ajaxData.scoring = o.userip;
$.ajax({
url: gURL,
beforeSend: function (jqXHR, settings) { if (window['console']) { console.log(new Array(30).join('-'), "REQUESTING RSS XML", new Array(30).join('-')); console.log({ ajaxData: ajaxData, ajaxRequest: settings.url, jqXHR: jqXHR, settings: settings, options: o }); console.log(new Array(80).join('-')); } },
dataType: o.output != "xml" ? "json" : "xml",
data: ajaxData,
type: "GET",
xhrFields: { withCredentials: true },
error: function (jqXHR, textStatus, errorThrown) { return new Array("ERROR", { jqXHR: jqXHR, textStatus: textStatus, errorThrown: errorThrown } ); },
success: function (data, textStatus, jqXHR) {
var f = data['responseData'] ? data.responseData['feed'] ? data.responseData.feed : null : null,
e = data['responseData'] ? data.responseData['feed'] ? data.responseData.feed['entries'] ? data.responseData.feed.entries : null : null : null
if (window['console']) {
console.log(new Array(30).join('-'), "SUCCESS", new Array(30).join('-'));
console.log({ data: data, textStatus: textStatus, jqXHR: jqXHR, feed: f, entries: e });
console.log(new Array(70).join('-'));
}
if (fun) {
return fun.call(this, data['responseData'] ? data.responseData['feed'] ? data.responseData.feed : data.responseData : null);
}
else {
return { data: data, textStatus: textStatus, jqXHR: jqXHR, feed: f, entries: e };
}
}
});
}
});
$.jQRSS.props = {
callback: "?",
gURL: "http://ajax.googleapis.com/ajax/services/feed/",
scoring: "h",
type: "load",
ver: "1.0"
};
$.jQRSS.methods = {
getObjLength: function(obj) {
if (typeof obj != "object") return -1;
var objLength = 0;
$.each(obj, function(k, v) { objLength++; })
return objLength;
}
};
$.jQRSS.defaults = {
count: "10", // max 100, -1 defaults 100
historical: false,
output: "json", // json, json_xml, xml
rss: null, // url OR search term like "Official Google Blog"
userip: null
};
}
})(jQuery);
ИСПОЛЬЗОВАНИЕ
// Param ORDER does not matter, however, you must have a link and a callback function
// link can be passed as "rss" in options
// $.jQRSS(linkORsearchString, callbackFunction, { options })
$.jQRSS('someUrl.xml', function(feed) { /* do work */ })
$.jQRSS(function(feed) { /* do work */ }, 'someUrl.xml', { count: 20 })
$.jQRSS('someUrl.xml', function(feed) { /* do work */ }, { count: 20 })
$.jQRSS({ count: 20, rss: 'someLink.xml' }, function(feed) { /* do work */ })
$.jQRSS("Поиск слов здесь вместо ссылки", функция (feed) {/ * do work * /}) // TODO: необходимо исправить
Опции
{
count: // default is 10; max is 100. Setting to -1 defaults to 100
historical: // default is false; a value of true instructs the system to return any additional historical entries that it might have in its cache.
output: // default is "json"; "json_xml" retuns json object with xmlString / "xml" returns the XML as String
rss: // simply an alternate place to put news feed link or search terms
userip: // as this uses Google API, I'll simply insert there comment on this:
/* Reference: https://developers.google.com/feed/v1/jsondevguide
This argument supplies the IP address of the end-user on
whose behalf the request is being made. Google is less
likely to mistake requests for abuse when they include
userip. In choosing to utilize this parameter, please be
sure that you're in compliance with any local laws,
including any laws relating to disclosure of personal
information being sent.
*/
}
(function(url, callback) {
jQuery.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);
}
});
})('http://news.hitb.org/rss.xml', function(feed){ // Change to desired URL
var entries = feed.entries, feedList = '';
for (var i = 0; i < entries.length; i++) {
feedList +='<li><a href="' + entries[i].link + '">' + entries[i].title + '</a></li>';
}
jQuery('.feed > ul').append(feedList);
});
<div class="feed">
<h4>Hacker News</h4>
<ul></ul>
</div>
Я согласен с @Andrew: использование Google - это надежный и многократно используемый способ сделать это с огромной выгодой, которую вы получите вместо XML вместо JSON. Дополнительным преимуществом использования 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 для подачи. Вы можете получить Twitter, RSS, Buzz с YQL. Я прочитал с 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'
});
zRSSfeed построен на jQuery, а простая тема просто великолепна.
Попробуйте.
Проект jQuery-rss довольно легкий и не навязывает какой-либо конкретный стиль.
Синтаксис может быть таким простым, как
$("#rss-feeds").rss("http://www.recruiter.com/feed/career.xml")
Смотрите http://jsfiddle.net/jhfrench/AFHfn/
Используйте Google AJAX API, кэшированные Google и любой формат вывода, который вы хотите.
Образец кода; http://code.google.com/apis/ajax/playground/
<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>
Superfeedr имеет плагин jquery, который делает это очень хорошо. У вас не будет проблем с политикой перекрестного происхождения, а обновления распространяются в режиме реального времени.
Хорошим вариантом является jQuery Feeds, он имеет встроенную систему шаблонов и использует Google Feed API, поэтому имеет междоменную поддержку.
jFeed прост и имеет пример для тестирования. Но если вы анализируете фид с другого сервера, вам нужно разрешить перекрестное распределение ресурсов (CORS) на сервере фида. Вам также необходимо проверить поддержку браузера.
Я загрузил образец, но по-прежнему не получал поддержки от IE ни в одной версии, когда я изменил URL-адрес в примере на что-то вроде example.com/feed.rss по протоколу http. CORS должен поддерживаться для IE 8 и выше, но пример jFeed не отображал фид.
Лучше всего использовать API Google:
https://developers.google.com/feed/v1/devguide
Увидеть:
https://github.com/jfhovinne/jFeed
http://en.wikipedia.org/wiki/Cross-origin_resource_sharing
http://en.wikipedia.org/wiki/Same_origin_policy
http://caniuse.com/cors