Parse RSS avec jQuery

Je veux utiliser jQuery pour parsingr les stream RSS. Est-ce que cela peut être fait avec la bibliothèque de base jQuery prête à l’emploi ou devrais-je utiliser un plugin?

ATTENTION

L’API Google Feed est officiellement obsolète et ne fonctionne plus !


Pas besoin d’un plugin complet. Cela retournera votre RSS en tant qu’object JSON à une fonction de rappel:

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); } }); } 

Utilisez jFeed – un plugin jQuery RSS / Atom. Selon les documents, c’est aussi simple que:

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

Pour ceux d’entre nous qui viennent à la discussion en retard, commencer avec 1.5 jQuery a des capacités intégrées d’parsing de xml, ce qui le rend assez facile à faire sans plugins ou services tiers. Il a une fonction parseXml et parsingra également automatiquement xml lors de l’utilisation de la fonction $ .get. Par exemple:

 $.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 ne fonctionne pas dans IE.

Utilisez zRSSFeed . Il a travaillé dans 5 minutes

Utiliser 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); } }); }

Vous pouvez également utiliser jquery-rss , qui est fourni avec de jolis modèles et est très facile à utiliser:

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

    les rendements (au 18 septembre 2013):

     

    Voir http://jsfiddle.net/jhfrench/AFHfn/ pour un exemple de travail.

    Utilisez l’API de stream Google AJAX, sauf si vos données RSS sont privées. C’est rapide, bien sûr.

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

    MISE À JOUR [ 25/04/2016 ] Version mieux écrite et entièrement prise en charge avec plus d’options et de capacités hébergées chez GitHub.jQRSS

    J’ai vu la réponse sélectionnée par Nathan Strutz , cependant, le lien de la page jQuery Plugin est toujours arrêté et la page d’accueil de ce site ne semble pas se charger. J’ai essayé quelques autres solutions et j’ai trouvé que la plupart d’entre elles étaient non seulement obsolètes, mais FACILES ! J’ai donc jeté mon chapeau et créé mon propre plugin, et avec les liens morts ici, cela semble être un bon endroit pour soumettre une réponse. Si vous cherchez cette réponse en 2012 (bientôt en 2013), vous remarquerez peut-être la frustration des liens morts et les vieux conseils que j’ai faits ici. Ci-dessous un lien vers mon exemple de plugin moderne ainsi que le code du plugin! Copiez simplement le code dans un fichier JS et liez-le dans votre en-tête comme n’importe quel autre plugin. Utiliser est extrêmement EZ!

    jsfiddle

    Code du plugin
    09/02/2015 – mise à jour depuis longtemps pour vérifier la console avant de lui envoyer des commandes! Devrait aider avec les anciens problèmes d’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['ensortinges'] ? data.responseData.feed.ensortinges : 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, ensortinges: 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, ensortinges: 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); 

    UTILISATION

     // Param ORDER does not matter, however, you must have a link and a callback function // link can be passed as "rss" in options // $.jQRSS(linkORsearchSsortingng, 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 (‘Mots de recherche ici au lieu d’un lien’, fonction (stream) {/ * ne fonctionne pas * /}) // TODO: correction nécessaire

    Les options

     { 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 ensortinges that it might have in its cache. output: // default is "json"; "json_xml" retuns json object with xmlSsortingng / "xml" returns the XML as Ssortingng 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 ensortinges = feed.ensortinges, feedList = ''; for (var i = 0; i < entries.length; i++) { feedList +='
  • ' + ensortinges[i].title + '
  • '; } jQuery('.feed > ul').append(feedList); });

    Hacker News

      Je suis d’accord avec @Andrew , l’utilisation de Google est un moyen solide et réutilisable de le faire avec l’avantage énorme que vous obtenez de récupérer JSON au lieu de XML. Un avantage supplémentaire de l’utilisation de Google en tant que proxy réside dans le fait que les services susceptibles de bloquer votre access direct à leurs données ne risquent pas d’arrêter Google. Voici un exemple d’utilisation des données du rapport de ski et des conditions. Ceci a toutes les applications courantes du monde réel: 1) Tiers / RSS / XML 2) JSONP 3) Nettoyage des chaînes et des chaînes lorsque vous ne pouvez pas obtenir les données exactement comme vous le voulez 4) en charge append des éléments au DOM. J’espère que cela aide certaines personnes!

         

      jFeed est quelque peu obsolète, fonctionnant uniquement avec les anciennes versions de jQuery. Cela fait deux ans qu’il a été mis à jour.

      zRSSFeed est peut-être un peu moins flexible, mais il est facile à utiliser et il fonctionne avec la version actuelle de jQuery (actuellement 1.4). http://www.zazar.net/developers/zrssfeed/

      Voici un exemple rapide de la documentation zRSSFeed:

       

      J’utilise jquery avec yql pour le feed. Vous pouvez récupérer twitter, rss, buzz avec yql. Je lis depuis http://tutorialzine.com/2010/02/feed-widget-jquery-css-yql/ . C’est très utile pour moi.

          

      Je vous conseille d’utiliser FeedEk . Après que Google Feed API soit officiellement obsolète, la plupart des plugins ne fonctionnent pas. Mais FeedEk fonctionne toujours. Il est très facile à utiliser et propose de nombreuses options à personnaliser.

       $('#divRss').FeedEk({ FeedUrl:'http://jquery-plugins.net/rss' }); 

      Avec options

       $('#divRss').FeedEk({ FeedUrl:'http://jquery-plugins.net/rss', MaxCount : 5, ShowDesc : true, ShowPubDate:true, DescCharacterLimit:100, TitleLinkTarget:'_blank', DateFormat: 'MM/DD/YYYY', DateFormatLang:'en' }); 

      Utilisez google ajax api , mis en cache par Google et tout format de sortie souhaité.

      Échantillon de code; http://code.google.com/apis/ajax/playground/#load_feed

         

      zRSSfeed est basé sur jQuery et le thème simple est génial.
      Essaie.

      Le projet jQuery-rss est assez léger et n’impose aucun style particulier.

      La syntaxe peut être aussi simple que

       $("#rss-feeds").rss("http://www.recruiter.com/feed/career.xml") 

      Voir un exemple de travail à http://jsfiddle.net/jhfrench/AFHfn/

      JQuery Feeds est une option intéressante, il dispose d’un système de modélisation intégré et utilise l’API Google Feed, ce qui lui permet de prendre en charge plusieurs domaines.

      Superfeedr a un plugin jquery qui le fait très bien. Vous n’avez aucun problème de politique d’origine croisée et les mises à jour sont propagées en temps réel.

      jFeed est facile et a un exemple à tester. Mais si vous parsingz un stream à partir d’un autre serveur, vous devez autoriser le partage de ressources d’origine (Cross Origin Resource Sharing, CORS) sur le serveur du stream. Vous devrez également vérifier le support du navigateur .

      J’ai téléchargé l’échantillon, mais je n’ai toujours reçu aucune assistance de IE dans aucune version lorsque j’ai modifié l’URL de l’exemple pour quelque chose comme example.com/feed.rss via le protocole http. CORS devrait être pris en charge pour IE 8 et les versions ultérieures, mais l’exemple jFeed n’a pas rendu le stream.

      Votre meilleur pari est d’utiliser l’API de Google:
      https://developers.google.com/feed/v1/devguide

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