Voglio usare jQuery per analizzare i feed RSS. Questo può essere fatto con la libreria jQuery di base pronta per l'uso o avrò bisogno di usare un plugin?
Voglio usare jQuery per analizzare i feed RSS. Questo può essere fatto con la libreria jQuery di base pronta per l'uso o avrò bisogno di usare un plugin?
Risposte:
AVVERTIMENTO
L'API per i feed di Google è ufficialmente obsoleta e non funziona più !
Non è necessario un intero plug-in. Ciò restituirà il tuo RSS come oggetto JSON a una funzione di callback:
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);
}
});
}
Usa jFeed - un plugin RSS / Atom jQuery. Secondo i documenti, è semplice come:
jQuery.getFeed({
url: 'rss.xml',
success: function(feed) {
alert(feed.title);
}
});
Per quelli di noi che verranno alla discussione in ritardo, a partire da 1.5 jQuery ha funzionalità di analisi XML incorporate, il che rende abbastanza facile farlo senza plugin o servizi di terze parti. Ha una funzione parseXml e analizzerà automaticamente xml quando si utilizza la funzione $ .get. Per esempio:
$.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...
});
});
$this.find("link").text()
restituisce sempre una stringa vuota ''?
jFeed non funziona in IE.
Usa zRSSFeed . Ha funzionato in 5 minuti
Aggiornamento (15 ottobre 2019)
Ho estratto la logica di base da jquery-rss in una nuova libreria chiamata Vanilla RSS che utilizza l'API di recupero e può funzionare senza dipendenze aggiuntive:
const RSS = require('vanilla-rss');
const rss = new RSS(
document.querySelector("#your-div"),
"http://www.recruiter.com/feed/career.xml",
{
// options go here
}
);
rss.render().then(() => {
console.log('Everything is loaded and rendered');
});
Originale
inviare:
Puoi anche usare jquery-rss , che viene fornito con un bel modello ed è super facile da usare:
$("#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>'
})
rendimenti (al 18 settembre 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>
Vedi http://jsfiddle.net/sdepold/ozq2dn9e/1/ per un esempio funzionante.
moment.js
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>
Utilizza l'API per feed AJAX di Google a meno che i tuoi dati RSS non siano privati. È veloce, ovviamente.
AGGIORNAMENTO [ 25/04/2016 ] Versione meglio scritta e pienamente supportata con più opzioni e capacità ospitate su GitHub.jQRSS
Ho visto la risposta selezionata di Nathan Strutz , tuttavia, il link alla pagina Plugin jQuery è ancora inattivo e la home page di quel sito non sembra caricarsi. Ho provato alcune altre soluzioni e ho trovato la maggior parte di esse non solo obsolete, ma FACILI ! Così ho gettato il mio cappello là fuori e creato il mio plugin, e con i link morti qui, questo sembra un ottimo posto per inviare una risposta. Se stai cercando questa risposta nel 2012 (presto alla b 2013), potresti notare la frustrazione di link morti e vecchi consigli qui come ho fatto io. Di seguito è riportato un link al mio esempio di plug-in moderno e il codice del plug-in! Copia semplicemente il codice in un file JS e collegalo nell'intestazione come qualsiasi altro plugin. L'uso è ESTREMAMENTE EZ!
Codice plug-in
2/9/2015 - fatto l'aggiornamento atteso da tempoconsole
prima di inviargli i comandi! Dovrebbe aiutare con i vecchi problemi di 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);
USO
// 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 ('Cerca parole qui invece di un collegamento', funzione (feed) {/ * do work * /})
// TODO: ha bisogno di riparazioni
Opzioni
{
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>
Sono d'accordo con @Andrew , l'utilizzo di Google è un modo solido e riutilizzabile per farlo con l'enorme vantaggio di ottenere JSON indietro invece di XML. Un ulteriore vantaggio dell'utilizzo di Google come proxy è che è improbabile che i servizi che potrebbero bloccare l'accesso diretto ai propri dati possano bloccare Google. Ecco un esempio usando il rapporto sci e i dati sulle condizioni. Questo ha tutte le comuni applicazioni del mondo reale: 1) RSS / XML di terze parti 2) JSONP 3) Pulizia di stringhe e stringhe su array quando non è possibile ottenere i dati esattamente come li si desidera 4) al caricamento aggiungere elementi al DOM. Spero che questo aiuti alcune persone!
<!-- 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 è piuttosto obsoleto, funziona solo con le versioni precedenti di jQuery. Sono passati due anni da quando è stato aggiornato.
zRSSFeed è forse un po 'meno flessibile, ma è facile da usare e funziona con l'attuale versione di jQuery (attualmente 1.4). http://www.zazar.net/developers/zrssfeed/
Ecco un breve esempio dai documenti zRSSFeed:
<div id="test"><div>
<script type="text/javascript">
$(document).ready(function () {
$('#test').rssfeed('http://feeds.reuters.com/reuters/oddlyEnoughNews', {
limit: 5
});
});
</script>
Sto usando jquery con yql per il feed. Puoi recuperare twitter, rss, buzz con yql. Ho letto da http://tutorialzine.com/2010/02/feed-widget-jquery-css-yql/ . È molto utile per me.
Ti consiglio di usare FeedEk . Dopo che l'API per i feed di Google è stata ufficialmente deprecata, la maggior parte dei plug-in non funziona. Ma FeedEk funziona ancora. È molto facile da usare e ha molte opzioni da personalizzare.
$('#divRss').FeedEk({
FeedUrl:'http://jquery-plugins.net/rss'
});
Con opzioni
$('#divRss').FeedEk({
FeedUrl:'http://jquery-plugins.net/rss',
MaxCount : 5,
ShowDesc : true,
ShowPubDate:true,
DescCharacterLimit:100,
TitleLinkTarget:'_blank',
DateFormat: 'MM/DD/YYYY',
DateFormatLang:'en'
});
<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>
Usa google ajax api , memorizzato nella cache di google e in qualsiasi formato di output desideri.
Esempio di codice; 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 è basato su jQuery e il tema semplice è fantastico.
Provaci.
Il progetto jQuery-rss è piuttosto leggero e non impone uno stile particolare.
La sintassi può essere semplice come
$("#rss-feeds").rss("http://www.recruiter.com/feed/career.xml")
Guarda un esempio funzionante su http://jsfiddle.net/jhfrench/AFHfn/
jQuery Feeds è una buona opzione, ha un sistema di template integrato e utilizza l'API per feed di Google, quindi ha il supporto tra domini.
Superfeedr ha un plugin jquery che lo fa molto bene. Non si verificheranno problemi con la politica di origine incrociata e gli aggiornamenti vengono propagati in tempo reale.
jFeed è facile e ha un esempio da provare. Tuttavia, se stai analizzando un feed da un altro server, dovrai consentire la condivisione delle risorse Cross Origin (CORS) sul server del feed. Dovrai anche farlo controllare il supporto del browser .
Ho caricato l'esempio ma non ho ancora ricevuto supporto da IE in nessuna versione quando ho cambiato l'URL nell'esempio in qualcosa di simile a example.com/feed.rss tramite il protocollo http. CORS dovrebbe essere supportato per IE 8 e versioni successive ma l'esempio jFeed non ha eseguito il rendering del feed.
La soluzione migliore è utilizzare l'API di Google:
https://developers.google.com/feed/v1/devguide
Vedi:
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