Разбор RSS с помощью jQuery


194

Я хочу использовать jQuery для разбора RSS-каналов. Можно ли это сделать с помощью базовой библиотеки jQuery из коробки или мне нужно будет использовать плагин?


1
Я хотел бы перейти на github.com/sdepold/jquery-rss - это лучший вариант прямо сейчас, доступно несколько вариантов! :)
Комрат

Для любого, кто приземлился здесь из Google, я должен был создать аналогичную программу для просмотра миниатюр deviantART. Красиво и просто и легко расширяется: adamjamesnaylor.com/2012/11/05/… . Обратите внимание, что он использует программу чтения каналов Google, но только для преобразования в JSON.
Адам Нейлор

Ответы:


208

ПРЕДУПРЕЖДЕНИЕ

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

4
Пробовал jFeed, и он не работал, это работает нормально и не требует дополнительной библиотеки.
diggersworld

15
знать ... используя API Google, каналы кэшируются, поэтому вы не будете получать последние и лучшие каналы.
c0deNinja

3
где это кешируется? как я могу удалить кеш?
Джег Багус

39
Это не очень хороший ответ. Это зависит от сторонней компании [Google], поддерживающей их сервис. Он не отвечает на исходный вопрос («Разбор RSS с jQuery») и вместо этого рекламирует Google. Что если Google удалит или изменит их API ajax? Ваш сайт ломается.
Чарльз Гудвин

11
@CharlesGoodwin Google только что удалил этот API! developers.google.com/feed/?hl=en
GôTô

185

Используйте jFeed - плагин jQuery RSS / Atom. Согласно документам, это так просто, как:

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

2
какие-либо примеры использования в реальном мире? т.е. анализ и отображение, а не предупреждение. или это так просто, как $ ("# results"). append (feed.title)
Энди Брудткухл

3
ПРИМЕЧАНИЕ: в загрузке есть много замечательных примеров
Энди Брудткуль

12
Anirudha, возможно, вы можете попробовать 7-zip? Это бесплатно, с открытым исходным кодом, и открывает различные типы файлов, в том числе tar / gzip.
Натан Струц

100
Обратите внимание, что последняя версия этого плагина доступна на Github .
Алан Х.

3
Кажется, что jFeed больше не поддерживается (последнее изменение примечания - 2 года, и многие открытые запросы извлечения игнорируются), и не работает с последними выпусками jQuery.
Тило

159

Для тех из нас, кто придет к дискуссии поздно, начиная с версии 1.5, jQuery имеет встроенные возможности синтаксического анализа xml, что позволяет довольно легко сделать это без плагинов или сторонних сервисов. Он имеет функцию parseXml, а также автоматически разбирает xml при использовании функции $ .get. Например:

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

10
Ошибка XmlHttpRequest: источник не разрешен Access-Control-Allow-Origin
jackocnr

12
@jackocnr, да, это оборотная сторона этого метода. Вы не можете выполнять междоменные запросы, если у вас нет доступа для установки заголовка Access-Control-Allow-Origin на исходном сервере. Если сервер поддерживает jsonp, то это ваш лучший выбор. В противном случае вы можете использовать прокси-скрипт в своем домене для получения XML и затем вызвать этот скрипт вместо внешнего сервера.
Дэвид Хаммонд

Действительно ли это единственный ответ, который не зависит от внешних плагинов или сервисов?
Blazemonger

Почему $this.find("link").text()всегда возвращает пустую строку ''?
Джефф Тиан

@JeffTian, ​​трудно сказать, не видя твой xml. Наиболее очевидная причина заключается в том, что элемент <link> отсутствует или пуст.
Дэвид Хаммонд

16

jFeed не работает в IE.

Используйте zRSSFeed . Работало ли это за 5 минут


2
Доступно по адресу zazar.net/developers/zrssfeed О том, чтобы самому попробовать, чтобы посмотреть, как это выглядит, выглядит многообещающе.
Винчестер

3
Кстати, zRssFeed внутренне использует Google Feed RSS API . Так что, если кто-то хочет сделать HTML-макет сам, проще вместо этого просто взглянуть на него.
Ciantic

пять минут или меньше :)
Констанца

супер круто ... единственное, если бы они предоставляли объекты фида, а не весь html в функции обратного вызова, это было бы здорово ...
shahil

2
К вашему сведению любой желающий использовать этот плагин. Разработчик разместил следующее. «Этот плагин прекращен из-за удаления API Google Feeds из сервиса, на который ответил плагин, он больше не будет доступен или не поддерживается». Источник: zazar.net/developers/jquery/zrssfeed
phanf

16

Обновление (15 октября 2019 г.)

Я извлек базовую логику из jquery-rss в новую библиотеку под названием Vanilla RSS, которая использует 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>'
})

урожайность (по состоянию на 18 сентября 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>

См. Http://jsfiddle.net/sdepold/ozq2dn9e/1/ для рабочего примера.


Имейте в виду, что jquery-rss использует Google Feed API, который будет кэшировать ленту новостей, что может вызвать проблемы. Вы можете обмануть его, добавив параметр нежелательной
ссылки,

приведите пример для форматирования даты без использованияmoment.js
Пурвеш Десаи

Проверьте следующий фрагмент gist.github.com/sdepold/d1e5e0e7a66fc77930fe. Он сгенерирует что-то вроде этого: "<некоторый контент>, [@ 2015-11-18]"
sdepold

Просто хотел отметить, что jquery-rss НЕ использует API-интерфейс Google Feed, а представляет собой замену вставки под названием Feedr ( github.com/sdepold/feedrapp ) и, соответственно, работает нормально, несмотря на то, что исходный API был отключен.
sdepold

15

Использование 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>

9

Используйте Google AJAX Feed API, если ваши данные RSS не являются частными. Это быстро, конечно.

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


1
Хорошая идея, но она не работает, когда вы находитесь внутри брандмауэра, который требует прокси-аутентификации с использованием диалогового окна.
Винчестер

канал Google устарел и больше не поддерживается.
Викас Этаги

8

ОБНОВЛЕНИЕ [ 25.04.2016 ] Теперь лучше написанная и полностью поддерживаемая версия с большим количеством опций и возможностей, размещенная на GitHub.jQRSS

Я видел « Выбранный ответ » Натана Струца , однако ссылка на страницу плагина jQuery все еще не работает, и домашняя страница этого сайта, похоже, не загружается. Я попробовал несколько других решений и обнаружил, что большинство из них не только устарели, но и ЛЕГКО ! Таким образом, я выбросил свою шляпу туда и сделал свой собственный плагин, и с мертвыми ссылками здесь, это похоже на отличное место, чтобы представить ответ. Если вы ищете этот ответ в 2012 году (вскоре до 2013 года), вы можете заметить разочарование от мертвых ссылок и старых советов, как и я. Ниже приведена ссылка на мой пример современного плагина, а также код для плагина! Просто скопируйте код в файл JS и свяжите его в своем заголовке, как любой другой плагин. Использование ЧРЕЗВЫЧАЙНО EZ!

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 («Поиск слов здесь вместо ссылки», function (feed) {/ * do work * /}) // TODO: необходимо исправить

Параметры

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

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

Я согласен с @Andrew : использование Google - это надежный и многократно используемый способ сделать это с огромной выгодой, которую вы получаете вместо XML вместо JSON. Дополнительным преимуществом использования 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>

2
Это не сработает из-за междоменных проблем. Вам нужен JSONP.
Gotofritz

1
Меня устраивает. Вы проверяли это? Я уверен, что Google возвращает jsonp, используя параметр обратного вызова, а не ajax dataType.
Дилан Валаде

Не уверен, для чего был понижающий голос. Этот код все еще работает три года спустя. Вставьте все это в консоль, и вы увидите текущие (XML) условия катания, добавленные в нижний колонтитул этой страницы.
Дилан Валаде

4

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>

Могу заметить, что это работает только с нелокальными фидами, поскольку он использует Google Feed API (Google должен иметь возможность загружать фид xml).
CmdrTallen


2

Я советую вам использовать 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'
});

Я не уверен, что вы действительно можете определить альтернативную конечную точку API, но если бы вы могли, потенциально была бы возможность заменить API фида Google на feedrapp: github.com/sdepold/feedrapp (который также является основой для jquery -rss в наше время)
sdepold

Это не делает разбор. Он использует yahooapis для анализа, а затем просто отображает содержимое.
Дэвид Л.

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

Неплохой ответ, но, к сожалению, вы не проделали большую работу по вставке кода. ;-)
до

0

Используйте Google AJAX API , кэшированные Google и любой формат вывода, который вы хотите.

Пример кода; 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>

это отличный вариант, потому что он не зависит от jquery!
Пит Гарднер




-1

Superfeedr имеет плагин jquery, который делает это очень хорошо. У вас не будет проблем с политикой перекрестного происхождения, а обновления распространяются в режиме реального времени.


Почему это решение не имеет проблем с CORS?
drewish

-2

jFeed прост и имеет пример для тестирования. Но если вы анализируете фид с другого сервера, вам нужно разрешить перекрестное распределение ресурсов (CORS) на сервере фида. Вам также необходимо проверить поддержку браузера .

Я загрузил образец, но по-прежнему не получал поддержки от IE в любой версии, когда я изменил URL в примере на что-то вроде example.com/feed.rss по протоколу http. CORS должен поддерживаться для IE 8 и выше, но пример jFeed не отображал фид.

Лучше всего использовать API Google:
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

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.