Analisar RSS com jQuery


194

Eu quero usar o jQuery para analisar feeds RSS. Isso pode ser feito com a biblioteca jQuery básica pronta para uso ou precisarei usar um plugin?


1
Eu iria para github.com/sdepold/jquery-rss - é a melhor opção no momento, várias opções disponíveis! :)
Komrath 13/02/2012

Para qualquer pessoa que desembarque aqui no google, tive que criar algo semelhante para um visualizador de miniaturas do deviantART. Agradável, simples e facilmente extensível: adamjamesnaylor.com/2012/11/05/… . Observe que ele usa o leitor de feeds do Google, mas apenas para convertê-lo em JSON.
Adam Naylor

Respostas:


208

AVISO

A API do Google Feed foi oficialmente descontinuada e não funciona mais !


Não há necessidade de um plugin inteiro. Isso retornará seu RSS como um objeto JSON para uma função de retorno de chamada:

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
Tentei o jFeed e não funcionou, isso funciona bem e não requer uma biblioteca extra.
diggersworld

15
esteja ciente ... usando a API do Google, os feeds são armazenados em cache para que você não receba os feeds mais recentes e melhores.
C0deNinja 21/09

3
onde é armazenado em cache? como posso remover o cache?
Jeg Bagus

39
Esta não é uma ótima resposta. Depende de uma empresa terceirizada [Google] manter seus serviços. Ele não responde à pergunta original ("Analisar RSS com jQuery") e, em vez disso, anuncia o Google. E se o Google soltar ou modificar sua API ajax? Seu site quebra.
Charles Goodwin

11
@CharlesGoodwin O Google acabou de remover esta API! developers.google.com/feed/?hl=en
GôTô

185

Use jFeed - um plugin jQuery RSS / Atom. De acordo com os documentos, é tão simples quanto:

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

2
alguns exemplos de uso no mundo real? ou seja, analisar e exibir em vez de alertar. ou é tão simples quanto $ ("# results"). append (feed.title)
Andy Brudtkuhl

3
NOTA: O download tem todos os tipos de grandes exemplos nele
Andy Brudtkuhl

12
Anirudha, talvez você possa experimentar o 7-zip? É gratuito, de código aberto e abre uma variedade de tipos de arquivos, incluindo tar / gzip.
18419 Nathan Strutz

100
Observe que a versão mais recente deste plugin está disponível no Github .
Alan H.

3
O jFeed parece não ser mais mantido ativamente (a última alteração de nota tem 2 anos e muitas solicitações de recebimento aberto parecem ser ignoradas) e não funciona com versões recentes do jQuery.
Thilo

159

Para aqueles que chegaram atrasados ​​à discussão, a partir do 1.5, o jQuery possui recursos de análise de xml integrados, o que facilita bastante isso sem plugins ou serviços de terceiros. Possui uma função parseXml e também analisará automaticamente o xml ao usar a função $ .get. Por exemplo:

$.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
Erro XmlHttpRequest: Origem não é permitido pelo Access-Control-Allow-Origin
jackocnr

12
@ Jackocnr, sim, essa é a desvantagem deste método. Você não pode fazer solicitações entre domínios, a menos que tenha acesso para definir o cabeçalho Access-Control-Allow-Origin no servidor de origem. Se o servidor suportar jsonp, essa é sua melhor aposta. Caso contrário, você pode usar um script proxy no seu domínio para recuperar o xml e depois chamar esse script em vez do servidor externo.
David Hammond

Essa é realmente a única resposta que não depende de plugins ou serviços externos?
Blazemonger 17/03/14

Por que $this.find("link").text()sempre retorna a string vazia ''?
Jeff Tian

@ Jeffff, difícil dizer sem ver o seu xml. O motivo mais óbvio seria que o elemento <link> está ausente ou vazio.
David Hammond

16

O jFeed não funciona no IE.

Use o zRSSFeed . Teve trabalhando em 5 minutos


2
Disponível em zazar.net/developers/zrssfeed prestes a experimentar por mim mesmo para ver como vai, parece promissor.
thewinchester

3
BTW, o zRssFeed usa internamente a API RSS do Google Feed . Portanto, se alguém quiser fazer o próprio layout HTML, é mais fácil olhar diretamente para ele.
Ciantic

cinco minutos ou menos :)
Constanta

super cool ... única coisa é se eles estavam fornecendo a alimentação de objetos em vez de todo o html em uma função de retorno do que isso seria ótimo ...
shahil

2
FYI quem quiser usar este plugin. O desenvolvedor postou o seguinte. "ESTE PLUGIN FOI INTERROMPIDO Devido à remoção da API do Google Feeds do serviço, na qual o plug-in respondeu, ele não estará mais disponível ou suportado." Fonte: zazar.net/developers/jquery/zrssfeed
phanf

16

Atualização (15 de outubro de 2019)

Eu extraí a lógica principal do jquery-rss para uma nova biblioteca chamada Vanilla RSS, que está usando a API de busca e pode funcionar sem nenhuma dependência adicional:

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

postar:

Você também pode usar o jquery-rss , que vem com um bom modelo e é super fácil de usar:

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

rendimentos (em 18 de setembro de 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>

Veja http://jsfiddle.net/sdepold/ozq2dn9e/1/ para um exemplo de trabalho.


Lembre-se de que o jquery-rss usa a API do Google Feed que armazenará em cache o feed, o que pode representar um problema. Você pode enganá-lo adicionando um parâmetro de lixo eletrônico: stackoverflow.com/questions/13401936/…
kukabuka

forneça um exemplo para formatar a data sem o uso demoment.js
Purvesh Desai

Verifique o seguinte snippet gist.github.com/sdepold/d1e5e0e7a66fc77930fe Ele irá gerar algo parecido com isto: "<some content>, [@ 2015-11-18]"
declinou

Só queria mencionar que o jquery-rss NÃO está usando a API do Google Feed, mas uma substituição suspensa chamada Feedr ( github.com/sdepold/feedrapp ) e, respectivamente, funciona bem, apesar da API original estar desativada.
setde 15/10/19

15

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

Use a API do Google AJAX Feed, a menos que seus dados RSS sejam privados. É rápido, é claro.

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


1
Uma boa ideia, mas não funciona quando você está dentro de um firewall que requer autenticação por proxy usando uma caixa de diálogo.
thewinchester

o feed do Google está obsoleto e não é mais compatível.
vikas etagi

8

ATUALIZAÇÃO [ 25/04/2016 ] Agora versão melhor escrita e com suporte total, com mais opções e habilidades hospedadas no GitHub.jQRSS

Eu vi o resposta selecionada de Nathan Strutz , no entanto, o link da página do jQuery Plugin ainda está inativo e a página inicial desse site não parecia carregar. Tentei algumas outras soluções e achei que a maioria delas era não apenas desatualizada, mas FÁCIL ! Então joguei meu chapéu lá fora e criei meu próprio plugin, e com os links mortos aqui, este parece ser um ótimo lugar para enviar uma resposta. Se você estiver procurando por essa resposta em 2012 (em breve em 2013), poderá notar a frustração de links mortos e conselhos antigos aqui, como eu fiz. Abaixo está um link para o meuexemplo de plugin moderno , bem como o código para o plugin! Simplesmente copie o código em um arquivo JS e vincule-o ao seu cabeçalho como qualquer outro plugin. O uso é EXTREMAMENTE EZ!

jsFiddle

Código do plug-in
9/9/2015 - atualização há muito esperada para verificar consoleantes de enviar comandos para ele! Deve ajudar com problemas mais antigos do 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);

USAR

//  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 ('Pesquisar palavras aqui em vez de um link', função (feed) {/ * funciona * /}) // TODO: Precisa ser corrigido

Opções

{
    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

Concordo com o @Andrew , usar o Google é uma maneira sólida e reutilizável de fazer isso com o enorme benefício de recuperar o JSON em vez do XML. Uma vantagem adicional de usar o Google como proxy é que é improvável que serviços que possam bloquear seu acesso direto aos dados deles parem o Google. Aqui está um exemplo usando relatório de esqui e dados de condições. Ele possui todos os aplicativos comuns do mundo real: 1) RSS / XML de terceiros 2) JSONP 3) Limpando cadeias e cadeias de array quando não é possível obter os dados exatamente da maneira que deseja 4) ao carregar, adicione elementos ao DOM. Espero que isso ajude algumas pessoas!

<!-- 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
Isso não vai funcionar devido a problemas entre domínios. Você precisa de JSONP.
gotofritz

1
Funciona para mim. Você testou? Certamente, o Google retorna o jsonp usando o parâmetro de retorno de chamada e não o ajax dataType.
Dylan Valade

Não tenho certeza para que serve o voto negativo. Esse código ainda funciona três anos depois. Cole tudo no console e você verá as condições atuais de esqui (XML) adicionadas ao rodapé desta página.
Dylan Valade

4

O jFeed é um tanto obsoleto, funcionando apenas com versões mais antigas do jQuery. Faz dois anos desde que foi atualizado.

O zRSSFeed talvez seja um pouco menos flexível, mas é fácil de usar e funciona com a versão atual do jQuery (atualmente 1.4). http://www.zazar.net/developers/zrssfeed/

Aqui está um exemplo rápido dos documentos do zRSSFeed:

<div id="test"><div>

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

Observe que isso só funciona com feeds não locais, pois usa a API do Google Feed (o Google deve poder carregar o XML do feed).
CmdrTallen


2

Eu aconselho você a usar o FeedEk . Após a desativação oficial da API do Google Feed, a maioria dos plug-ins não funciona. Mas o FeedEk ainda está funcionando. É muito fácil de usar e tem muitas opções para personalizar.

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

Com opções

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

Não tenho certeza se você pode realmente definir um ponto de extremidade da API alternativa, mas, se pudesse, haveria a possibilidade de substituir a API do feed do Google por feedrapp: github.com/sdepold/feedrapp (que também é a espinha dorsal do jquery -rss hoje em dia)
decde

Isso não faz análise. Ele usa yahooapis para fazer a análise e, em seguida, apenas exibe o conteúdo.
David L.

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>

Não é uma resposta ruim, mas infelizmente você não fez o melhor trabalho colando o código. ;-)
Até

0

Use a API do google ajax , armazenado em cache pelo google e qualquer formato de saída desejado.

Amostra de código; 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>

essa é uma ótima opção, pois não depende do jquery!
Pete Gardner



-1

O jQuery Feeds é uma boa opção, ele possui um sistema de modelos embutido e usa a API do Google Feed, portanto, possui suporte entre domínios.



-2

O jFeed é fácil e tem um exemplo para você testar. Mas se você estiver analisando um feed de outro servidor, precisará permitir o CORS ( Cross Origin Resource Sharing ) no servidor do feed. Você também precisará verificar o suporte do navegador .

Fiz upload da amostra, mas ainda não recebi suporte do IE em nenhuma versão quando alterei o URL no exemplo para algo como example.com/feed.rss através do protocolo http. O CORS deve ser suportado para o IE 8 e superior, mas o exemplo do jFeed não processou o feed.

Sua melhor aposta é usar a API do Google:
https://developers.google.com/feed/v1/devguide

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

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.