Saya ingin menggunakan jQuery untuk mem-parsing umpan RSS. Apakah ini dapat dilakukan dengan pustaka jQuery dasar di luar kotak atau akankah saya perlu menggunakan plugin?

PERINGATAN

Google Feed API sudah usang secara resmi dan tidak berfungsi lagi !

Tidak perlu seluruh plugin. Ini akan mengembalikan RSS Anda sebagai objek JSON ke fungsi panggilan balik:

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

Gunakan jFeed - plugin jQuery RSS / Atom. Menurut dokumen, sesederhana:

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

Bagi kita yang datang ke diskusi terlambat, dimulai dengan 1,5 jQuery memiliki kemampuan parsing xml built-in, yang membuatnya cukup mudah untuk melakukan ini tanpa plugin atau layanan pihak ke-3. Ini memiliki fungsi parseXml, dan juga akan mem-parsing xml saat menggunakan fungsi $ .get. Misalnya:

$.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 tidak berfungsi di IE.

Gunakan zRSSFeed . Sudah bekerja dalam 5 menit

Pembaruan (15 Okt 2019)

Saya mengekstraksi logika inti dari jquery-rss ke perpustakaan baru bernama Vanilla RSS yang menggunakan API fetch dan dapat bekerja tanpa ketergantungan tambahan:

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

Asli

pos:

Anda juga dapat menggunakan jquery-rss , yang dilengkapi dengan templating yang bagus dan super mudah digunakan:

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

hasil (per 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>

Lihat http://jsfiddle.net/sdepold/ozq2dn9e/1/ untuk contoh yang berfungsi.

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

Gunakan Google AJAX Feed API kecuali data RSS Anda pribadi. Cepat, tentu saja.

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

UPDATE [ 25/4/2016 ] Versi sekarang lebih baik ditulis dan didukung penuh dengan lebih banyak opsi dan kemampuan yang dihosting di GitHub.jQRSS

Saya melihat Jawaban yang Dipilih oleh Nathan Strutz , namun, tautan halaman Plugin jQuery masih turun dan halaman beranda untuk situs tersebut tampaknya tidak dimuat. Saya mencoba beberapa solusi lain dan menemukan sebagian besar dari mereka, tidak hanya ketinggalan zaman, tetapi MUDAH ! Jadi saya melemparkan topi saya di luar sana dan membuat plugin saya sendiri, dan dengan tautan mati di sini, ini sepertinya tempat yang bagus untuk mengirimkan jawaban. Jika Anda mencari jawaban ini pada 2012 (segera ke 2013) Anda mungkin melihat frustrasi link mati dan saran lama di sini seperti yang saya lakukan. Di bawah ini adalah tautan ke contoh plugin modern saya serta kode ke plugin! Cukup salin kode ke file JS & tautkan di header Anda seperti plugin lainnya. Penggunaannya EZ SANGAT LUAR BIASA!

jsFiddle

Plugin Code
_{2/9/2015 - membuat pembaruan yang lama tertunda untuk memeriksa consolesebelum mengirim perintah ke sana! Harus membantu dengan masalah IE yang lebih lama.}

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

MENGGUNAKAN

//  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 ('Cari Kata Di Sini dan Bukan Tautan', fungsi (feed) {/ * do work * /}) // TODO: Perlu diperbaiki

Pilihan

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

Saya setuju dengan @Andrew , menggunakan Google adalah cara yang solid dan dapat digunakan kembali untuk melakukannya dengan manfaat besar yang Anda dapatkan kembali JSON alih-alih XML. Keuntungan tambahan menggunakan Google sebagai proxy adalah bahwa layanan yang mungkin memblokir akses langsung Anda ke data mereka tidak mungkin menghentikan Google. Berikut adalah contoh menggunakan laporan ski dan data kondisi. Ini memiliki semua aplikasi dunia nyata yang umum: 1) Pihak ketiga RSS / XML 2) JSONP 3) Membersihkan string dan string ke array ketika Anda tidak bisa mendapatkan data persis seperti yang Anda inginkan 4) pada load menambahkan elemen ke DOM. Semoga ini bisa membantu beberapa orang!

<!-- 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 agak usang, hanya bekerja dengan versi jQuery yang lebih lama. Sudah dua tahun sejak diperbarui.

zRSSFeed mungkin sedikit kurang fleksibel, tetapi mudah digunakan, dan bekerja dengan versi jQuery saat ini (saat ini 1.4). http://www.zazar.net/developers/zrssfeed/

Berikut adalah contoh cepat dari dokumen zRSSFeed:

<div id="test"><div>

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

Saya menggunakan jquery dengan yql untuk memberi makan. Anda dapat mengambil twitter, rss, buzz dengan yql. Saya membaca dari http://tutorialzine.com/2010/02/feed-widget-jquery-css-yql/ . Ini sangat berguna bagi saya.

Saya menyarankan Anda untuk menggunakan FeedEk . Setelah Google Feed API tidak lagi digunakan, sebagian besar plugin tidak berfungsi. Tapi FeedEk masih berfungsi. Ini sangat mudah digunakan dan memiliki banyak opsi untuk menyesuaikan.

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

Dengan opsi

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

Gunakan google ajax api , di-cache oleh google dan format output apa pun yang Anda inginkan.

Contoh kode; 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 dibangun di atas jQuery dan tema sederhananya mengagumkan.
Cobalah.

Proyek jQuery-rss sangat ringan dan tidak memaksakan gaya tertentu.

Sintaksnya bisa sesederhana

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

Lihat contoh kerja di http://jsfiddle.net/jhfrench/AFHfn/

jQuery Feeds adalah opsi yang bagus, ia memiliki sistem templating bawaan dan menggunakan Google Feed API, sehingga memiliki dukungan lintas domain.

Superfeedr memiliki plugin jquery yang melakukannya dengan sangat baik. Anda tidak akan memiliki masalah Kebijakan Asal Silang dan pembaruan disebarkan secara langsung.

jFeed mudah dan memiliki contoh untuk Anda uji. Tetapi jika Anda mengurai umpan dari server lain, Anda harus mengizinkan Cross Origin Resource Sharing (CORS) di server umpan. Anda juga perlu memeriksa dukungan browser .

Saya mengunggah sampel tetapi masih tidak mendapatkan dukungan dari IE dalam versi apa pun ketika saya mengubah url pada contoh menjadi sesuatu seperti example.com/feed.rss melalui protokol http. CORS harus didukung untuk IE 8 dan di atasnya tetapi contoh jFeed tidak membuat umpan.

Taruhan terbaik Anda adalah menggunakan Google API:
https://developers.google.com/feed/v1/devguide

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