JavaScript kullanarak bir RSS beslemesi nasıl ayrıştırılır?

Bir RSS beslemesini (XML sürüm 2.0) ayrıştırmam ve ayrıştırılmış ayrıntıları bir HTML sayfasında görüntülemem gerekiyor.

Feed'i Ayrıştırma

İle jQuery 'ın jFeed

_{(Bunu gerçekten önermeyin, diğer seçeneklere bakın.)}

jQuery.getFeed({
   url     : FEED_URL,
   success : function (feed) {
      console.log(feed.title);
      // do more stuff here
   }
});

İle jQuery Dahili s XML Desteği'

$.get(FEED_URL, function (data) {
    $(data).find("entry").each(function () { // or "item" or whatever suits your feed
        var el = $(this);

        console.log("------------------------");
        console.log("title      : " + el.find("title").text());
        console.log("author     : " + el.find("author").text());
        console.log("description: " + el.find("description").text());
    });
});

İle jQuery ve Google AJAX Yem API

$.ajax({
  url      : document.location.protocol + '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&callback=?&q=' + encodeURIComponent(FEED_URL),
  dataType : 'json',
  success  : function (data) {
    if (data.responseData.feed && data.responseData.feed.entries) {
      $.each(data.responseData.feed.entries, function (i, e) {
        console.log("------------------------");
        console.log("title      : " + e.title);
        console.log("author     : " + e.author);
        console.log("description: " + e.description);
      });
    }
  }
});

Ancak bu, onların çevrimiçi ve erişilebilir olmalarına güvendiğiniz anlamına gelir.

Bina İçeriği

Başarıyla feed'den gereken bilgileri çıkarılan sonra, yaratabileceği DocumentFragmentile (s document.createDocumentFragment()ile oluşturulan elementleri (içeren document.createElement()verilerinizi görüntülemek için enjekte etmek isteyeceksiniz).

İçeriği enjekte etmek

Sayfada olmasını istediğiniz kap öğesini seçin ve belge parçalarınızı buna ekleyin ve içeriğini tamamen değiştirmek için basitçe innerHTML kullanın.

Gibi bir şey:

$('#rss-viewer').append(aDocumentFragmentEntry);

veya:

$('#rss-viewer')[0].innerHTML = aDocumentFragmentOfAllEntries.innerHTML;

Test verisi

Bu yazının verdiği gibi, bu sorunun beslemesini kullanmak :

<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom" xmlns:creativeCommons="http://backend.userland.com/creativeCommonsRssModule" xmlns:re="http://purl.org/atompub/rank/1.0">
    <title type="text">How to parse a RSS feed using javascript? - Stack Overflow</title>
    <link rel="self" href="https://stackoverflow.com/feeds/question/10943544" type="application/atom+xml" />
        <link rel="hub" href="http://pubsubhubbub.appspot.com/" />        
    <link rel="alternate" href="https://stackoverflow.com/q/10943544" type="text/html" />
    <subtitle>most recent 30 from stackoverflow.com</subtitle>
    <updated>2012-06-08T06:36:47Z</updated>
    <id>https://stackoverflow.com/feeds/question/10943544</id>
    <creativeCommons:license>http://www.creativecommons.org/licenses/by-sa/3.0/rdf</creativeCommons:license> 
    <entry>
        <id>https://stackoverflow.com/q/10943544</id>
        <re:rank scheme="http://stackoverflow.com">2</re:rank>
        <title type="text">How to parse a RSS feed using javascript?</title>
        <category scheme="https://stackoverflow.com/feeds/question/10943544/tags" term="javascript"/><category scheme="https://stackoverflow.com/feeds/question/10943544/tags" term="html5"/><category scheme="https://stackoverflow.com/feeds/question/10943544/tags" term="jquery-mobile"/>
        <author>
            <name>Thiru</name>
            <uri>https://stackoverflow.com/users/1126255</uri>
        </author>
        <link rel="alternate" href="/programming/10943544/how-to-parse-a-rss-feed-using-javascript" />
        <published>2012-06-08T05:34:16Z</published>
        <updated>2012-06-08T06:35:22Z</updated>
        <summary type="html">
            &lt;p&gt;I need to parse the RSS-Feed(XML version2.0) using XML and I want to display the parsed detail in HTML page, I tried in many ways. But its not working. My system is running under proxy, since I am new to this field, I don&#39;t know whether it is possible or not. If any one knows please help me on this. Thanks in advance.&lt;/p&gt;

        </summary>
    </entry>
    <entry>
        <id>https://stackoverflow.com/questions/10943544/-/10943610#10943610</id>
        <re:rank scheme="http://stackoverflow.com">1</re:rank>
        <title type="text">Answer by haylem for How to parse a RSS feed using javascript?</title>
        <author>
            <name>haylem</name>
            <uri>https://stackoverflow.com/users/453590</uri>
        </author>    
        <link rel="alternate" href="/programming/10943544/how-to-parse-a-rss-feed-using-javascript/10943610#10943610" />
        <published>2012-06-08T05:43:24Z</published>   
        <updated>2012-06-08T06:35:22Z</updated>
        <summary type="html">&lt;h1&gt;Parsing the Feed&lt;/h1&gt;

&lt;h3&gt;With jQuery&#39;s jFeed&lt;/h3&gt;

&lt;p&gt;Try this, with the &lt;a href=&quot;http://plugins.jquery.com/project/jFeed&quot; rel=&quot;nofollow&quot;&gt;jFeed&lt;/a&gt; &lt;a href=&quot;http://www.jquery.com/&quot; rel=&quot;nofollow&quot;&gt;jQuery&lt;/a&gt; plug-in&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;jQuery.getFeed({
   url     : FEED_URL,
   success : function (feed) {
      console.log(feed.title);
      // do more stuff here
   }
});
&lt;/code&gt;&lt;/pre&gt;

&lt;h3&gt;With jQuery&#39;s Built-in XML Support&lt;/h3&gt;

&lt;pre&gt;&lt;code&gt;$.get(FEED_URL, function (data) {
    $(data).find(&quot;entry&quot;).each(function () { // or &quot;item&quot; or whatever suits your feed
        var el = $(this);

        console.log(&quot;------------------------&quot;);
        console.log(&quot;title      : &quot; + el.find(&quot;title&quot;).text());
        console.log(&quot;author     : &quot; + el.find(&quot;author&quot;).text());
        console.log(&quot;description: &quot; + el.find(&quot;description&quot;).text());
    });
});
&lt;/code&gt;&lt;/pre&gt;

&lt;h3&gt;With jQuery and the Google AJAX APIs&lt;/h3&gt;

&lt;p&gt;Otherwise, &lt;a href=&quot;https://developers.google.com/feed/&quot; rel=&quot;nofollow&quot;&gt;Google&#39;s AJAX Feed API&lt;/a&gt; allows you to get the feed as a JSON object:&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;$.ajax({
  url      : document.location.protocol + &#39;//ajax.googleapis.com/ajax/services/feed/load?v=1.0&amp;amp;num=10&amp;amp;callback=?&amp;amp;q=&#39; + encodeURIComponent(FEED_URL),
  dataType : &#39;json&#39;,
  success  : function (data) {
    if (data.responseData.feed &amp;amp;&amp;amp; data.responseData.feed.entries) {
      $.each(data.responseData.feed.entries, function (i, e) {
        console.log(&quot;------------------------&quot;);
        console.log(&quot;title      : &quot; + e.title);
        console.log(&quot;author     : &quot; + e.author);
        console.log(&quot;description: &quot; + e.description);
      });
    }
  }
});
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;But that means you&#39;re relient on them being online and reachable.&lt;/p&gt;

&lt;hr&gt;

&lt;h1&gt;Building Content&lt;/h1&gt;

&lt;p&gt;Once you&#39;ve successfully extracted the information you need from the feed, you need to create document fragments containing the elements you&#39;ll want to inject to display your data.&lt;/p&gt;

&lt;hr&gt;

&lt;h1&gt;Injecting the content&lt;/h1&gt;

&lt;p&gt;Select the container element that you want on the page and append your document fragments to it, and simply use innerHTML to replace its content entirely.&lt;/p&gt;
</summary>
    </entry></feed>

idamlar

JQuery'nin Yerleşik XML Desteğini Kullanma

çağırma:

$.get('https://stackoverflow.com/feeds/question/10943544', function (data) {
    $(data).find("entry").each(function () { // or "item" or whatever suits your feed
        var el = $(this);

        console.log("------------------------");
        console.log("title      : " + el.find("title").text());
        console.log("author     : " + el.find("author").text());
        console.log("description: " + el.find("description").text());
    });
});

Çıktı:

------------------------
title      : How to parse a RSS feed using javascript?
author     : 
            Thiru
            https://stackoverflow.com/users/1126255

description: 
------------------------
title      : Answer by haylem for How to parse a RSS feed using javascript?
author     : 
            haylem
            https://stackoverflow.com/users/453590

description: 

JQuery ve Google AJAX API'lerini kullanma

çağırma:

$.ajax({
  url      : document.location.protocol + '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&callback=?&q=' + encodeURIComponent('https://stackoverflow.com/feeds/question/10943544'),
  dataType : 'json',
  success  : function (data) {
    if (data.responseData.feed && data.responseData.feed.entries) {
      $.each(data.responseData.feed.entries, function (i, e) {
        console.log("------------------------");
        console.log("title      : " + e.title);
        console.log("author     : " + e.author);
        console.log("description: " + e.description);
      });
    }
  }
});

Çıktı:

------------------------
title      : How to parse a RSS feed using javascript?
author     : Thiru
description: undefined
------------------------
title      : Answer by haylem for How to parse a RSS feed using javascript?
author     : haylem
description: undefined

Başka bir kullanımdan kaldırılmış seçenek (@daylight sayesinde) ve benim için en kolayı ( SpokenToday.info için kullandığım şey budur ):

Google Yem API JQuery kullanmadan ve sadece 2 adımlarla:

1. Kitaplığı içe aktarın:

   <script type="text/javascript" src="https://www.google.com/jsapi"></script>
   <script type="text/javascript">google.load("feeds", "1");</script>
   

2. Beslemeleri bul / yükle ( belgeler ):

   var feed = new google.feeds.Feed('http://www.google.com/trends/hottrends/atom/feed?pn=p1');
   feed.load(function (data) {
       // Parse data depending on the specified response format, default is JSON.
       console.dir(data);
   });
   

3. Verileri ayrıştırmak için yanıt biçimiyle ilgili belgeleri kontrol edin .

RSS widget'ınız için Google Feed API'ye basit ve ücretsiz bir alternatif arıyorsanız rss2json.com bunun için uygun bir çözüm olabilir.

Aşağıdaki api belgelerinden örnek bir kod üzerinde nasıl çalıştığını görmeyi deneyebilirsiniz :

google.load("feeds", "1");

    function initialize() {
      var feed = new google.feeds.Feed("https://news.ycombinator.com/rss");
      feed.load(function(result) {
        if (!result.error) {
          var container = document.getElementById("feed");
          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);
          }
        }
      });
    }
    google.setOnLoadCallback(initialize);

<html>
  <head>    
     <script src="https://rss2json.com/gfapi.js"></script>
  </head>
  <body>
    <p><b>Result from the API:</b></p>
    <div id="feed"></div>
  </body>
</html>

Bunu okuyan başka biri için (2019'dan itibaren) maalesef çoğu JS RSS okuma uygulaması artık çalışmıyor. Öncelikle Google API kapandı, bu nedenle bu artık bir seçenek değil ve CORS güvenlik politikası nedeniyle artık alanlar arası RSS beslemeleri talep edemezsiniz.

Https://www.raymondcamden.com/2015/12/08/parsing-rss-feeds-in-javascript-options (2015) üzerindeki örneği kullanarak aşağıdakileri elde ediyorum:

Access to XMLHttpRequest at 'https://feeds.feedburner.com/raymondcamdensblog?format=xml' from origin 'MYSITE' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Bu doğrudur ve son web sitesi tarafından alınan bir güvenlik önlemidir, ancak şimdi yukarıdaki yanıtların işe yaramayacağı anlamına gelmektedir.

Çözümüm muhtemelen RSS beslemesini PHP aracılığıyla ayrıştırmak ve son hedef beslemesine erişmeye çalışmak yerine javascript'in PHP'ye erişmesine izin vermek olacaktır.

Düz bir javascript API kullanmak istiyorsanız, https://github.com/hongkiat/js-rss-reader/ adresinde iyi bir örnek var.

Https://www.hongkiat.com/blog/rss-reader-in-javascript/ adresinde tam açıklama

fetchYöntemi, bir kaynağı eşzamansız olarak getiren global bir yöntem olarak kullanır . Aşağıda bir kod parçası var:

fetch(websiteUrl).then((res) => {
  res.text().then((htmlTxt) => {
    var domParser = new DOMParser()
    let doc = domParser.parseFromString(htmlTxt, 'text/html')
    var feedUrl = doc.querySelector('link[type="application/rss+xml"]').href
  })
}).catch(() => console.error('Error in fetching the website'))

Sen kullanabilirsiniz jquery-rss veya Vanilya RSS güzel çiftleşmiş ile gelir ve kullanımına süper kolaydır:

// Example for jquery.rss
$("#your-div").rss("https://stackoverflow.com/feeds/question/10943544", {
    limit: 3,
    layoutTemplate: '<ul class="inline">{entries}</ul>',
    entryTemplate: '<li><a href="{url}">[{author}@{date}] {title}</a><br/>{shortBodyPlain}</li>'
})

// Example for Vanilla RSS
const RSS = require('vanilla-rss');
const rss = new RSS(
    document.querySelector("#your-div"),
    "https://stackoverflow.com/feeds/question/10943544",
    { 
      // options go here
    }
);
rss.render().then(() => {
  console.log('Everything is loaded and rendered');
});

Çalışan bir örnek için http://jsfiddle.net/sdepold/ozq2dn9e/1/ adresine bakın .

Bunun için şimdi iyi bir çözüm bulmaya çalışırken , jQuery Feed API aracılığıyla RSS ve Atom beslemelerini ayrıştırmak ve görüntülemek için harika bir iş çıkaran FeedEk jQuery RSS / ATOM Besleme Eklentisi ile karşılaştım . Temel XML tabanlı RSS beslemesi için, bunun bir cazibe gibi çalıştığını ve yerel olarak bile çalışması için sunucu tarafı komut dosyalarına veya diğer CORS çözümlerine ihtiyaç duymadığını gördüm.

Pek çok yanıltıcı makale ve cevaptan o kadar bıkmıştım ki kendi RSS okuyucumu yazdım: https://gouessej.wordpress.com/2020/06/28/comment-creer-un-lecteur-rss-en-javascript-how- Oluşturulması-a-rSS-okuyucu-içinde-javaScript /

RSS dosyalarını almak için AJAX isteklerini kullanabilirsiniz, ancak bu yalnızca ve ancak bir CORS proxy'si kullanıyorsanız çalışacaktır. Size daha sağlam bir çözüm sunmak için kendi CORS proxy'mi yazmaya çalışacağım. Bu arada çalışıyor, Debian Linux altında sunucuma yerleştirdim.

Çözümüm JQuery kullanmıyor, üçüncü taraf kitaplıkları olmayan yalnızca standart Javascript API'leri kullanıyorum ve Microsoft Internet Explorer 11 ile bile çalışması gerekiyor.