Chcę używać jQuery do analizowania kanałów RSS. Czy można to zrobić przy użyciu podstawowej biblioteki jQuery po wyjęciu z pudełka, czy też będę musiał użyć wtyczki?

OSTRZEŻENIE

Interfejs API Google Feed jest oficjalnie przestarzały i już nie działa !

Nie potrzebujesz całej wtyczki. Spowoduje to powrót Twojego RSS jako obiektu JSON do funkcji zwrotnej:

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

Użyj jFeed - wtyczki jQuery RSS / Atom. Według dokumentów jest to tak proste, jak:

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

Dla tych z nas, którzy spóźnią się na dyskusję, poczynając od wersji 1.5 jQuery ma wbudowane funkcje analizy XML, co sprawia, że ​​jest to dość łatwe bez wtyczek i usług innych firm. Ma funkcję parseXml, a także automatycznie analizuje xml podczas korzystania z funkcji $ .get. Na przykład:

$.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 nie działa w IE.

Użyj zRSSFeed . Miał to działać w 5 minut

Aktualizacja (15 października 2019 r.)

Wyodrębniłem podstawową logikę z jquery-rss do nowej biblioteki Vanilla RSS, która używa interfejsu API pobierania i może działać bez żadnych dodatkowych zależności:

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

Oryginalny

Poczta:

Możesz także użyć jquery-rss , która ma fajne szablony i jest bardzo łatwa w użyciu:

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

plony (stan na 18 września 2013 r.):

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

Zobacz http://jsfiddle.net/sdepold/ozq2dn9e/1/ dla działającego przykładu.

Korzystanie z 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>

Używaj Google AJAX Feed API, chyba że Twoje dane RSS są prywatne. Oczywiście jest szybki.

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

AKTUALIZACJA [ 25.04.2016 ] Teraz lepiej napisana iw pełni obsługiwana wersja z większą liczbą opcji i możliwości hostowanych na GitHub.jQRSS

Widziałem Selected Odpowiedź przez Nathan Strutz jednak link do strony jQuery Plugin jest nadal w dół i na stronie głównej w tym miejscu nie wydaje się obciążeniem. Wypróbowałem kilka innych rozwiązań i okazało się, że większość z nich jest nie tylko przestarzała, ale ŁATWA ! Tak więc rzuciłem kapelusz i stworzyłem własną wtyczkę, a przy martwych linkach tutaj wydaje się to świetne miejsce do przesłania odpowiedzi. Jeśli szukasz tej odpowiedzi w 2012 roku (wkrótce do b 2013), możesz zauważyć frustrację martwych linków i starych rad tutaj, tak jak ja. Poniżej znajduje się link do mojego nowoczesnego przykładu wtyczki, a także kod do wtyczki! Wystarczy skopiować kod do pliku JS i połączyć go w nagłówku, jak każdą inną wtyczkę. Zastosowanie jest WYJĄTKOWO EZ!

jsFiddle

Kod wtyczki
_{2/9/2015 - spóźniona aktualizacja sprawdzona consoleprzed wysłaniem do niej poleceń! Powinien pomóc w przypadku starszych problemów z 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);

POSŁUGIWAĆ SIĘ

//  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 („Szukaj słów tutaj zamiast linku”, funkcja (kanał) {/ * do pracy * /}) // TODO: Wymaga naprawy

Opcje

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

Zgadzam się z @Andrew , korzystanie z Google to solidny, wielokrotnego użytku sposób na zrobienie tego z ogromną korzyścią, że odzyskujesz JSON zamiast XML. Dodatkową zaletą używania Google jako serwera proxy jest to, że usługi, które mogą blokować bezpośredni dostęp do ich danych, raczej nie powstrzymają Google. Oto przykład z wykorzystaniem raportu narciarskiego i danych warunków. Ma to wszystkie typowe zastosowania w świecie rzeczywistym: 1) Zewnętrzne źródła danych RSS / XML 2) JSONP 3) Czyszczenie ciągów i ciągów do tablicy, gdy nie można uzyskać danych dokładnie tak, jak tego chcesz 4) po załadowaniu dodać elementy do DOM. Mam nadzieję, że to pomaga niektórym ludziom!

<!-- 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 jest nieco przestarzały, działa tylko ze starszymi wersjami jQuery. Od jego aktualizacji minęły dwa lata.

zRSSFeed jest może nieco mniej elastyczny, ale jest łatwy w użyciu i działa z aktualną wersją jQuery (obecnie 1.4). http://www.zazar.net/developers/zrssfeed/

Oto szybki przykład z dokumentów zRSSFeed:

<div id="test"><div>

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

Używam jquery z yql do karmienia. Możesz pobrać twitter, rss, buzz z yql. Czytam z http://tutorialzine.com/2010/02/feed-widget-jquery-css-yql/ . Jest to dla mnie bardzo przydatne.

Radzę korzystać z FeedEk . Po oficjalnym wycofaniu interfejsu API Google Feed większość wtyczek nie działa. FeedEk wciąż działa. Jest bardzo łatwy w użyciu i ma wiele opcji dostosowywania.

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

Z opcjami

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

Użyj google ajax api , buforowanego przez google i dowolnego formatu wyjściowego.

Próbka kodu; 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 jest oparty na jQuery, a prosty motyw jest niesamowity.
Spróbuj.

Projekt jQuery-rss jest dość lekki i nie narzuca żadnej szczególnej stylizacji.

Składnia może być tak prosta jak

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

Zobacz działający przykład na http://jsfiddle.net/jhfrench/AFHfn/

jQuery Feeds to fajna opcja, ma wbudowany system szablonów i wykorzystuje interfejs API Google Feed, dzięki czemu obsługuje wiele domen.

Superfeedr ma wtyczkę jquery, która robi to bardzo dobrze. Nie będziesz mieć żadnych problemów dotyczących zasady pochodzenia, a aktualizacje będą propagowane w czasie rzeczywistym.

jFeed jest łatwy i ma przykład do przetestowania. Ale jeśli analizujesz kanał z innego serwera, musisz zezwolić na udostępnianie zasobów pochodzących z wielu źródeł (CORS) na serwerze kanału. Musisz także sprawdzić obsługę przeglądarki .

Przesłałem próbkę, ale nadal nie otrzymałem wsparcia z IE w żadnej wersji, kiedy zmieniłem adres URL w przykładzie na coś takiego jak example.com/feed.rss za pośrednictwem protokołu http. CORS powinien być obsługiwany dla IE 8 i wyższych, ale przykład jFeed nie renderował kanału.

Najlepszym rozwiązaniem jest skorzystanie z interfejsu API Google:
https://developers.google.com/feed/v1/devguide

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