Parse RSS with jQuery

je veux utiliser jQuery pour analyser les flux RSS. Est-ce que cela peut être fait avec la bibliothèque de base jQuery sortie de la boîte ou vais-je avoir besoin d'utiliser un plugin?

189
demandé sur random 2008-10-22 20:49:58

20 réponses

WARNING

l'API Google Feed est officiellement déprécié et ne fonctionne plus !


pas besoin d'un plugin entier. Cela ramènera votre RSS en tant qu'objet 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);
    }
  });
}
211
répondu Andrew Childs 2017-02-24 12:27:51

Use jFeed - a jQuery RSS/Atom plugin. Selon les documents, c'est aussi simple que:

jQuery.getFeed({
   url: 'rss.xml',
   success: function(feed) {
      alert(feed.title);
   }
});
183
répondu Nathan Strutz 2014-01-28 23:54:31

pour ceux d'entre nous qui viennent à la discussion tard, en commençant par 1.5 jQuery a intégré des capacités de parsing xml, ce qui rend assez facile de le faire sans plugins ou services tiers. Il a une fonction parseXml, et analysera automatiquement le xml lors de l'utilisation de $.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...
    });
});
151
répondu David Hammond 2011-09-23 20:52:41

jFeed ne fonctionne pas dans IE.

Use zRSSFeed . Fait fonctionner en 5 minutes

17
répondu Mark Steggles 2011-07-14 18:42:46

Utilisant JFeed

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>
15
répondu Andy Brudtkuhl 2008-10-22 17:43:11

vous pouvez également utiliser jquery-rss , qui est livré avec Nice templating et est super facile à utiliser:

$("#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>'
})

rendements (à compter du 18 Septembre 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>

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

15
répondu sdepold 2013-09-18 04:02:32

utilisez L'API Google AJAX Feed à moins que vos données RSS ne soient privées. C'est rapide, bien sûr.

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

9
répondu yogman 2012-05-11 04:13:37

UPDATE [ 4/25/2016 ] maintenant version mieux écrite et entièrement supportée avec plus d'options et de capacités hébergées à GitHub.jQRSS

j'ai vu le sélectionné réponse par Nathan Strutz , cependant, le lien de page du Plugin jQuery est encore en bas et la page d'accueil pour ce site ne semble pas charger. J'ai essayé quelques autres solutions et j'ai trouvé que la plupart d'entre elles étaient, non seulement périmées, mais facile ! Donc j'ai jeté mon chapeau là-bas et fait mon propre plugin, et avec les liens morts ici, cela semble être un endroit idéal pour présenter une réponse. Si vous cherchez cette réponse en 2012 (bientôt à b 2013) vous pouvez remarquer la frustration de liens morts et de vieux conseils ici comme je l'ai fait. Ci-dessous est un lien vers mon moderne plugin exemple 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. L'utilisation est extrêmement EZ!

jsFiddle

code Plugin

2/9/2015 - fait depuis longtemps mise à jour en retard pour vérifier console avant de lui envoyer des commandes! Devrait aider avec des IE plus âgés question.

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

UTILISER

//  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('Recherche par Mots Ici au lieu d'un Lien', function(alimentation) { /* faire des travaux */ }) // TODO: les Besoins de fixation

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 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.
        */
}
8
répondu SpYk3HH 2017-05-23 12:26:14
(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>
5
répondu John Magnolia 2012-03-18 18:31:22

je suis d'accord avec @Andrew , utiliser Google est une manière solide et réutilisable de le faire avec l'énorme avantage que vous obtenez JSON retour au lieu de XML. Un avantage supplémentaire de L'utilisation de Google comme un proxy est que les services qui pourraient bloquer votre accès direct à leurs données sont peu susceptibles D'arrêter Google. Voici un exemple d'utilisation de ski et des conditions données. Ceci a toutes les applications communes du monde réel: 1) RSS/XML de tiers 2) JSONP 3) nettoyage des chaînes et des chaînes de caractères à array quand vous ne pouvez pas obtenir les données exactement comme vous le voulez 4) sur load ajouter des éléments au DOM. Espérons que cela aide certaines personnes!

<!-- 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>
5
répondu Dylan Valade 2017-05-23 12:02:37

jFeed est quelque peu obsolète, ne travaillant qu'avec des versions plus anciennes de jQuery. Il a été deux ans depuis 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 zRSSFeed docs:

<div id="test"><div>

<script type="text/javascript">
$(document).ready(function () {
  $('#test').rssfeed('http://feeds.reuters.com/reuters/oddlyEnoughNews', {
    limit: 5
  });
});
</script>
4
répondu Alderete 2010-06-10 07:01:27

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

2
répondu saturngod 2010-04-13 06:55:49
<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>
1
répondu kabuski 2010-09-02 12:11:49

je vous conseille d'utiliser FeedEk . Après que L'API Google Feed soit officiellement dépréciée, la plupart des plugins ne fonctionnent pas. Mais FeedEk travaille toujours. Il est très facile à utiliser et a 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'
});
1
répondu jQP 2015-12-11 23:02:39

utiliser api Google ajax , mis en cache par google et tout format de sortie que vous voulez.

Échantillon de Code

; 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>
0
répondu Daniel Magnusson 2012-10-08 20:27:19

zRSSfeed est construit sur jQuery et le thème simple est impressionnant.

Lui donner un essai.

0
répondu Guruprasad Balaji 2012-11-11 11:57:29

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 Exemple de http://jsfiddle.net/jhfrench/AFHfn /

0
répondu Jeromy French 2013-08-01 20:33:42

jQuery Feeds est une option agréable, Il dispose d'un système de templating intégré et utilise L'API Google Feed, Il dispose donc d'un support multi-domaines.

-1
répondu camagu 2012-07-13 02:33:06

Superfeedr a une plugin jquery qui fait cela très bien. Vous n'aurez aucun problème de politique D'origine croisée et les mises à jour sont propagées en temps réel.

-1
répondu Julien Genestoux 2014-01-23 20:21:43

jFeed est facile et a un exemple pour vous de tester. Mais si vous analysez un flux depuis un autre serveur, vous devez autoriser Cross Origin Resource Sharing (CORS) sur le serveur du flux. Vous aurez également besoin de vérifier la prise en charge du navigateur .

j'ai téléchargé l'échantillon , mais n'a toujours pas obtenu le soutien de l'IE dans n'importe quelle version quand j'ai changé l'url dans l'exemple de quelque chose comme example.com/feed.rss via le protocole http. CORS doit être supporté pour IE 8 et au-dessus mais l'exemple de jFeed n'a pas rendu l'alimentation.

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

-2
répondu Rimian 2012-05-11 04:16:05