jquery - 使用 jQuery 解析 RSS

Question

我想使用 jQuery 来解析 RSS 提要。这可以通过开箱即用的基本 jQuery 库来完成，还是我需要使用插件？

score 208 · Accepted Answer

警告

Google Feed API已正式弃用，不再有效！

不需要整个插件。这会将您的 RSS 作为 JSON 对象返回给回调函数：

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

score 185 · Accepted Answer

使用 jFeed - 一个 jQuery RSS/Atom 插件。根据文档，它很简单：

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

score 160 · Accepted Answer

对于我们这些迟来的讨论者，从 1.5 开始，jQuery 具有内置的 xml 解析功能，这使得在没有插件或 3rd 方服务的情况下很容易做到这一点。它有一个 parseXml 函数，并且在使用 $.get 函数时也会自动解析 xml。例如：

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

score 16 · Accepted Answer

16

jFeed 在 IE 中不起作用。

使用zRSSFeed。让它在 5 分钟内工作

于 2010-06-12T20:21:47.643 回答

score 16 · Accepted Answer

更新（2019 年 10 月 15 日）

我将核心逻辑从 jquery-rss 提取到一个名为Vanilla RSS的新库中，该库使用 fetch API 并且可以在没有任何额外依赖项的情况下工作：

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

原来的

邮政：

您还可以使用jquery-rss，它带有漂亮的模板并且非常易于使用：

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

收益率（截至 2013 年 9 月 18 日）：

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

有关工作示例，请参阅http://jsfiddle.net/sdepold/ozq2dn9e/1/ 。

score 15 · Accepted Answer

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

score 9 · Accepted Answer

除非您的 RSS 数据是私有的，否则请使用 Google AJAX Feed API。当然，它很快。

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

score 8 · Accepted Answer

更新[ 2016 年 4 月 25 日] 现在更好的编写和完全支持的版本具有更多选项和功能，托管在GitHub.jQRSS

我看到了Nathan Strutz的 Selected Answer，但是，jQuery 插件页面链接仍然关闭，并且该站点的主页似乎没有加载。我尝试了其他一些解决方案，发现其中大多数不仅过时，而且很简单！因此，我把帽子扔在那里并制作了自己的插件，并且这里有死链接，这似乎是提交答案的好地方。如果您在 2012 年（很快到 2013 年）寻找这个答案，您可能会像我一样注意到死链接和旧建议的挫败感。下面是我的现代插件示例的链接以及插件的代码！只需将代码复制到 JS 文件中并像任何其他插件一样将其链接到您的标题中。使用非常方便！

jsFiddle

插件代码2/9/2015 -_{在向其发送命令之前}
_{进行了早该更新的检查！console应该有助于解决较旧的 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);

采用

//  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('Search Words Here instead of a Link', function(feed) { /* do work */ })~~ // TODO: Needs fix

选项

{
    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.
        */
}

score 5 · Accepted Answer

我同意@Andrew 的观点，使用 Google 是一种可靠、可重用的方法，它的巨大好处是您可以返回 JSON 而不是 XML。使用 Google 作为代理的另一个优势是，可能阻止您直接访问其数据的服务不太可能阻止 Google。这是一个使用滑雪报告和条件数据的示例。这具有所有常见的现实世界应用程序：1）第三方 RSS/XML 2）JSONP 3）当您无法完全按照您想要的方式获取数据时，将字符串和字符串清理为数组 4）在加载时将元素添加到DOM。希望这可以帮助一些人！

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

score 5 · Accepted Answer

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

score 4 · Accepted Answer

jFeed 有点过时了，只适用于旧版本的 jQuery。自更新以来已经两年了。

zRSSFeed 可能不太灵活，但它易于使用，并且可以与当前版本的 jQuery（当前为 1.4）一起使用。http://www.zazar.net/developers/zrssfeed/

这是 zRSSFeed 文档中的一个简单示例：

<div id="test"><div>

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

score 2 · Accepted Answer

我正在使用带有 yql 的 jquery 作为提要。您可以使用 yql 检索 twitter、rss、buzz。我从http://tutorialzine.com/2010/02/feed-widget-jquery-css-yql/阅读。这对我来说非常有用。

score 2 · Accepted Answer

我建议您使用FeedEk。在 Google Feed API 正式弃用后，大多数插件都无法正常工作。但 FeedEk 仍在工作。它非常易于使用，并且有许多自定义选项。

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

有选项

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

score 1 · Accepted Answer

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

score 0 · Accepted Answer

0

zRSSfeed基于jQuery构建，简单的主题很棒。
试试看。

于 2011-09-21T01:37:46.747 回答

score 0 · Accepted Answer

使用由 google 缓存的google ajax api和您想要的任何输出格式。

代码示例； 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>

score 0 · Accepted Answer

jQuery-rss 项目非常轻量级，并没有强加任何特定的样式。

语法可以很简单

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

请参阅http://jsfiddle.net/jhfrench/AFHfn/ 上的工作示例

score -1 · Accepted Answer

jQuery Feeds是一个不错的选择，它具有内置的模板系统并使用 Google Feed API，因此它具有跨域支持。

score -1 · Accepted Answer

Superfeedr有一个jquery 插件，它做得很好。您不会有任何跨域策略问题，并且更新会实时传播。

score -2 · Accepted Answer

jFeed 很简单，并且有一个示例供您测试。但是，如果您要解析来自另一台服务器的提要，则需要在提要的服务器上允许跨域资源共享(CORS)。您还需要检查浏览器支持。

我上传了示例，但当我通过 http 协议将示例中的 url 更改为 example.com/feed.rss 之类的内容时，仍然没有得到任何版本的 IE 支持。IE 8 及更高版本应支持 CORS，但 jFeed 示例未呈现提要。

您最好的选择是使用 Google 的 API：
https ://developers.google.com/feed/v1/devguide

参见：
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

jquery - 使用 jQuery 解析 RSS

20 回答 20

jsFiddle

Related

Reference