Parse RSS con jQuery

Voglio usare jQuery per analizzare i feed RSS. Questo può essere fatto con la libreria jQuery di base pronta all’uso o dovrò usare un plugin?

    AVVERTIMENTO

    L’API di Google Feed è ufficialmente deprecata e non funziona più !


    Non c’è bisogno di un intero plugin. Ciò restituirà il tuo RSS come object 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 jQuery RSS / Atom. Secondo i documenti, è semplice come:

     jQuery.getFeed({ url: 'rss.xml', success: function(feed) { alert(feed.title); } }); 

    Per quelli di noi che arrivano alla discussione in ritardo, a partire da 1.5 jQuery ha funzionalità di parsing XML incorporate, il che rende abbastanza semplice farlo senza plug-in o servizi di terze parti. Ha una funzione parseXml e analizza automaticamente xml quando usa 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... }); }); 

    jFeed non funziona in IE.

    Usa zRSSFeed . Ha funzionato in 5 minuti

    Utilizzando JFeed

     function getFeed(sender, uri) { jQuery.getFeed({ url: 'proxy.php?url=' + uri, success: function(feed) { jQuery(sender).append('

    ' + '' + feed.title + '' + '

    '); var html = ''; for(var i = 0; i < feed.items.length && i < 5; i++) { var item = feed.items[i]; html += '

    ' + '' + item.title + '' + ''; html += '
    ' + item.updated + '
    '; html += '
    ' + item.description + '
    '; } jQuery(sender).append(html); } }); }

    Puoi anche usare jquery-rss , che è dotato di un bel template ed è super facile da usare:

     $("#your-div").rss("http://www.recruiter.com/feed/career.xml", { limit: 3, layoutTemplate: '
      {entries}
    ', entryTemplate: '
  • [{author}@{date}] {title}
    {shortBodyPlain}
  • ' })

    rendimenti (dal 18 settembre 2013):

     

    Vedi http://jsfiddle.net/jhfrench/AFHfn/ per un esempio funzionante.

    Utilizza Google AJAX Feed API a meno che i tuoi dati RSS non siano privati. È veloce, ovviamente.

    https://developers.google.com/feed/

    AGGIORNAMENTO [ 4/25/2016 ] Ora versione scritta e completamente supportata con più opzioni e abilità ospitate su GitHub.jQRSS

    Ho visto la risposta selezionata di Nathan Strutz , tuttavia, il collegamento alla pagina jQuery Plugin è ancora inattivo e la home page per quel sito non sembra caricata. Ho provato alcune altre soluzioni e ho trovato la maggior parte di esse, non solo obsolete, ma FACILI ! Così ho buttato il mio cappello là fuori e ho creato il mio plugin, e con i link morti qui, questo sembra un ottimo posto dove presentare una risposta. Se stai cercando questa risposta nel 2012 (tra poco al 2013) potresti notare la frustrazione dei link morti e dei vecchi consigli qui come ho fatto io. Di seguito è riportato un collegamento al mio esempio di plugin moderno e il codice del plugin! Basta copiare il codice in un file JS e collegarlo nella tua intestazione come qualsiasi altro plugin. L’uso è ESTREMAMENTE EZ!

    jsFiddle

    Codice plugin
    2/9/2015 – ha fatto l’aggiornamento a lungo scaduto per controllare la console prima di inviare comandi ad essa! 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 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: risoluzione dei problemi

    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 +='
  • ' + entries[i].title + ''; } jQuery('.feed > ul').append(feedList); });

    Hacker News

    • Sono d’accordo con @Andrew , usare Google è un modo solido e riusabile 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 interrompano Google. Ecco un esempio che utilizza il rapporto sci e i dati sulle condizioni. Questo ha tutte le comuni applicazioni del mondo reale: 1) Terze parti RSS / XML 2) JSONP 3) Pulizia stringhe e stringa su matrice quando non è ansible ottenere i dati esattamente come si desidera 4) su carico aggiungere elementi al DOM. Spero che questo aiuti alcune persone!

         

      jFeed è un po ‘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 la versione corrente di jQuery (attualmente 1.4). http://www.zazar.net/developers/zrssfeed/

      Ecco un rapido esempio dai documenti zRSSFeed:

       

      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 di Google Feed è ufficialmente deprecata, la maggior parte dei plug-in non funziona. Ma FeedEk sta ancora funzionando. È 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' }); 

      Utilizza google ajax api , memorizzato da Google e qualsiasi formato di output che desideri.

      Codice di esempio; http://code.google.com/apis/ajax/playground/#load_feed

         

      zRSSfeed è costruito su jQuery e il tema semplice è fantastico.
      Provaci.

      Il progetto jQuery-rss è piuttosto leggero e non impone alcun particolare stile.

      La syntax 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 usa l’API di Google Feed, quindi ha il supporto per più domini.

      Superfeedr ha un plugin jQuery che lo fa molto bene. Non avrai alcun problema relativo alla politica di origine incrociata e gli aggiornamenti verranno propagati in tempo reale.

      jFeed è semplice e ha un esempio da testare. Ma se stai analizzando un feed da un altro server, dovrai consentire il Cross Source Resource Sharing (CORS) sul server del feed. Avrai anche bisogno di controllare il supporto del browser .

      Ho caricato il campione ma ancora non ho ricevuto supporto da IE in nessuna versione quando ho cambiato l’URL nell’esempio con qualcosa come example.com/feed.rss tramite il protocollo http. CORS dovrebbe essere supportato per IE 8 e successivi ma l’esempio jFeed non ha reso il feed.

      La soluzione migliore è utilizzare l’API di Google:
      https://developers.google.com/feed/v1/devguide

      Vedere:
      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