Nasıl bir RSS JavaScript kullanarak ayrıştırmak için?

SORU

8 HAZİRAN 2012, Cuma

Nasıl bir RSS JavaScript kullanarak ayrıştırmak için?

RSS (XML sürüm 2.0) ayrıştırmak gerekiyor ve bir HTML sayfası çözümlenir detaylarına.

CEVAP

8 HAZİRAN 2012, Cuma

Besleme ayrıştırma

jQuery'24 s

(Gerçekten bu bir tavsiye, başka bir seçenek göremiyorum.)

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

jQuery's İnşa 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());
    });
});

jQuery Google AJAX Feed API ile

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

Ama onları online ve ulaşılabilir olmak relient demektir.

Binanın İçerik

Bir kere başarılı bir şekilde çıkarılan bilgiye ihtiyacınız besleme, sen-ebil yaratmak DocumentFragments (document.createDocumentFragment() içeren unsurlar (oluşturulan document.createElement()) istersin enjekte etmek için görüntü veri.

İçeriğini enjekte

Sayfada istediğiniz kapsayıcı öğesi seçin ve belge parçaları eklemek, ve sadece kullanmak içeriği tamamen yerine innerHTML.

Gibi bir şey

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

ya da:

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

Test Verileri

Bu yazı olarak verir question's feed kullanma:

<?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="http://stackoverflow.com/feeds/question/10943544" type="application/atom xml" />
        <link rel="hub" href="http://pubsubhubbub.appspot.com/" />        
    <link rel="alternate" href="http://stackoverflow.com/q/10943544" type="text/html" />
    <subtitle>most recent 30 from stackoverflow.com</subtitle>
    <updated>2012-06-08T06:36:47Z</updated>
    <id>http://stackoverflow.com/feeds/question/10943544</id>
    <creativeCommons:license>http://www.creativecommons.org/licenses/by-sa/3.0/rdf</creativeCommons:license> 
    <entry>
        <id>http://stackoverflow.com/q/10943544</id>
        <rerank scheme="http://stackoverflow.com">2</rerank>
        <title type="text">How to parse a RSS feed using javascript?</title>
        <category scheme="http://stackoverflow.com/feeds/question/10943544/tags" term="javascript"/><category scheme="http://stackoverflow.com/feeds/question/10943544/tags" term="html5"/><category scheme="http://stackoverflow.com/feeds/question/10943544/tags" term="jquery-mobile"/>
        <author>
            <name>Thiru</name>
            <uri>http://stackoverflow.com/users/1126255</uri>
        </author>
        <link rel="alternate" href="http://stackoverflow.com/questions/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">
            <p>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't know whether it is possible or not. If any one knows please help me on this. Thanks in advance.</p>

        </summary>
    </entry>
    <entry>
        <id>http://stackoverflow.com/questions/10943544/-/10943610#10943610</id>
        <rerank scheme="http://stackoverflow.com">1</rerank>
        <title type="text">Answer by haylem for How to parse a RSS feed using javascript?</title>
        <author>
            <name>haylem</name>
            <uri>http://stackoverflow.com/users/453590</uri>
        </author>    
        <link rel="alternate" href="http://stackoverflow.com/questions/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"><h1>Parsing the Feed</h1>

<h3>With jQuery's jFeed</h3>

<p>Try this, with the <a href="http://plugins.jquery.com/project/jFeed" rel="nofollow">jFeed</a> <a href="http://www.jquery.com/" rel="nofollow">jQuery</a> plug-in</p>

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

<h3>With jQuery's Built-in XML Support</h3>

<pre><code>$.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());
    });
});
</code></pre>

<h3>With jQuery and the Google AJAX APIs</h3>

<p>Otherwise, <a href="https://developers.google.com/feed/" rel="nofollow">Google's AJAX Feed API</a> allows you to get the feed as a JSON object:</p>

<pre><code>$.ajax({
  url      : document.location.protocol   '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&amp;num=10&amp;callback=?&amp;q='   encodeURIComponent(FEED_URL),
  dataType : 'json',
  success  : function (data) {
    if (data.responseData.feed &amp;&amp; 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);
      });
    }
  }
});
</code></pre>

<p>But that means you're relient on them being online and reachable.</p>

<hr>

<h1>Building Content</h1>

<p>Once you've successfully extracted the information you need from the feed, you need to create document fragments containing the elements you'll want to inject to display your data.</p>

<hr>

<h1>Injecting the content</h1>

<p>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.</p>
</summary>
    </entry></feed>

İnfazlar

JQuery kullanarak Yerleşik XML Desteği

Çağırma:

$.get('http://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());
    });
});

Yazdırır:

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

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

description:

Kullanarak jQuery ve Google AJAX API

Çağırma:

$.ajax({
  url      : document.location.protocol   '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&callback=?&q='   encodeURIComponent('http://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);
      });
    }
  }
});

Yazdırır:

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