Ich möchte jQuery verwenden, um RSS-Feeds zu analysieren. Kann dies mit der sofort einsatzbereiten jQuery-Basisbibliothek durchgeführt werden oder muss ich ein Plugin verwenden?

WARNUNG

Die Google Feed API ist offiziell veraltet und funktioniert nicht mehr !

Kein ganzes Plugin erforderlich. Dadurch wird Ihr RSS als JSON-Objekt an eine Rückruffunktion zurückgegeben:

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

Verwenden Sie jFeed - ein jQuery RSS / Atom-Plugin. Laut den Dokumenten ist es so einfach wie:

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

Für diejenigen von uns, die spät zur Diskussion kommen, hat jQuery ab 1.5 integrierte XML-Parsing-Funktionen, was es ziemlich einfach macht, dies ohne Plugins oder Dienste von Drittanbietern zu tun. Es verfügt über eine parseXml-Funktion und analysiert xml automatisch, wenn die $ .get-Funktion verwendet wird. Z.B:

$.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 funktioniert im IE nicht.

Verwenden Sie zRSSFeed . Hatte es in 5 Minuten funktioniert

Update (15. Oktober 2019)

Ich habe die Kernlogik aus jquery-rss in eine neue Bibliothek namens Vanilla RSS extrahiert, die die Abruf-API verwendet und ohne zusätzliche Abhängigkeiten arbeiten kann:

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

Original

Post:

Sie können auch jquery-rss verwenden , das mit schönen Vorlagen geliefert wird und sehr einfach zu bedienen ist:

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

Renditen (Stand 18. September 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>

Ein funktionierendes Beispiel finden Sie unter http://jsfiddle.net/sdepold/ozq2dn9e/1/ .

Verwenden von 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>

Verwenden Sie die Google AJAX-Feed-API, es sei denn, Ihre RSS-Daten sind privat. Es ist natürlich schnell.

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

UPDATE [ 25.04.2016 ] Jetzt besser geschriebene und vollständig unterstützte Version mit mehr Optionen und Fähigkeiten, die auf GitHub.jQRSS gehostet werden

Ich habe die ausgewählte Antwort von Nathan Strutz gesehen , aber der Link auf der jQuery Plugin-Seite ist immer noch nicht verfügbar und die Homepage für diese Site schien nicht geladen zu sein. Ich habe ein paar andere Lösungen ausprobiert und festgestellt, dass die meisten nicht nur veraltet, sondern auch EINFACH sind ! Also habe ich meinen Hut rausgeworfen und mein eigenes Plugin erstellt, und mit den toten Links hier scheint dies ein großartiger Ort zu sein, um eine Antwort einzureichen. Wenn Sie nach dieser Antwort im Jahr 2012 (bald bis b 2013) suchen, werden Sie möglicherweise die Frustration über tote Links und alte Ratschläge hier bemerken, wie ich es getan habe. Unten finden Sie einen Link zu meinem modernen Plugin-Beispiel sowie den Code zum Plugin! Kopieren Sie einfach den Code in eine JS-Datei und verknüpfen Sie ihn wie jedes andere Plugin in Ihrem Header. Verwendung ist EXTREM EZ!

jsFiddle

Plugin Code
_{09.02.2015 - längst überfälliges Update durchgeführt, um zu prüfen, consolebevor Befehle an es gesendet werden ! Sollte bei älteren IE-Problemen helfen.}

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

VERWENDEN

//  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 ('Hier Wörter anstelle eines Links suchen', Funktion (Feed) {/ * funktioniert * /}) // TODO: Muss korrigiert werden

Optionen

{
    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>

Ich stimme @Andrew zu . Die Verwendung von Google ist eine solide und wiederverwendbare Methode, um den enormen Vorteil zu erzielen , dass Sie JSON anstelle von XML zurückerhalten. Ein zusätzlicher Vorteil der Verwendung von Google als Proxy besteht darin, dass Dienste, die Ihren direkten Zugriff auf ihre Daten blockieren könnten, Google wahrscheinlich nicht stoppen. Hier ist ein Beispiel mit Skibericht und Zustandsdaten. Dies hat alle gängigen realen Anwendungen: 1) RSS / XML von Drittanbietern 2) JSONP 3) Bereinigen von Zeichenfolgen und Zeichenfolgen in Arrays, wenn Sie die Daten nicht genau so abrufen können, wie Sie es möchten 4) Fügen Sie beim Laden Elemente zum hinzu DOM. Hoffe das hilft einigen Leuten!

<!-- 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 ist etwas veraltet und funktioniert nur mit älteren Versionen von jQuery. Es ist zwei Jahre her, seit es aktualisiert wurde.

zRSSFeed ist vielleicht etwas weniger flexibel, aber einfach zu bedienen und funktioniert mit der aktuellen Version von jQuery (derzeit 1.4). http://www.zazar.net/developers/zrssfeed/

Hier ist ein kurzes Beispiel aus den zRSSFeed-Dokumenten:

<div id="test"><div>

<script type="text/javascript">
$(document).ready(function () {
  $('#test').rssfeed('http://feeds.reuters.com/reuters/oddlyEnoughNews', {
    limit: 5
  });
});
</script>

Ich benutze jquery mit yql als Feed. Sie können Twitter, RSS und Buzz mit YQL abrufen. Ich habe von http://tutorialzine.com/2010/02/feed-widget-jquery-css-yql/ gelesen . Es ist sehr nützlich für mich.

Ich rate Ihnen, FeedEk zu verwenden . Nachdem die Google Feed-API offiziell veraltet ist, funktionieren die meisten Plugins nicht mehr. Aber FeedEk funktioniert immer noch. Es ist sehr einfach zu bedienen und bietet viele Optionen zum Anpassen.

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

Mit Optionen

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

Verwenden Sie die von Google zwischengespeicherte Google Ajax-API und ein beliebiges Ausgabeformat.

Codebeispiel; 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 basiert auf jQuery und das einfache Thema ist fantastisch.
Versuche es.

Das jQuery-rss-Projekt ist ziemlich leicht und erfordert kein bestimmtes Styling.

Die Syntax kann so einfach sein wie

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

Ein Arbeitsbeispiel finden Sie unter http://jsfiddle.net/jhfrench/AFHfn/.

jQuery Feeds ist eine nette Option. Es verfügt über ein integriertes Template-System und verwendet die Google Feed-API, sodass es domänenübergreifende Unterstützung bietet.

Superfeedr hat ein JQuery-Plugin, das das sehr gut macht. Sie haben kein Cross Origin Policy-Problem und die Updates werden in Echtzeit weitergegeben.

jFeed ist einfach und bietet ein Beispiel zum Testen. Wenn Sie jedoch einen Feed von einem anderen Server analysieren, müssen Sie Cross Origin Resource Sharing (CORS) auf dem Server des Feeds zulassen . Sie müssen auch die Browserunterstützung überprüfen .

Ich habe das Beispiel hochgeladen, aber in keiner Version Unterstützung vom IE erhalten, als ich die URL im Beispiel über das http-Protokoll in example.com/feed.rss geändert habe. CORS sollte für IE 8 und höher unterstützt werden, aber das jFeed-Beispiel hat den Feed nicht gerendert.

Verwenden Sie am besten die Google-API:
https://developers.google.com/feed/v1/devguide

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