如何使用JavaScriptparsingRSS提要？
我需要parsingRSS提要（XML版本2.0），并在HTML页面中显示parsing的细节。
分析Feed
用jQuery的jFeed
（不要真的推荐一个，请参阅其他选项。）
jQuery.getFeed({ url : FEED_URL, success : function (feed) { console.log(feed.title); // do more stuff here } }); 使用jQuery的内置XML支持
$.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
$.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); }); } } });
但是，这意味着你是依赖于他们在线和可达。
build设内容
一旦成功地从提要中提取了所需的信息，就可以创buildDocumentFragment （带有document.createDocumentFragment()其中包含要用来显示数据的元素（使用document.createElement()创builddocument.createElement() 。
注入内容
在页面上select所需的容器元素，然后将文档片段添加到该元素，然后使用innerHTML完全replace其内容。
就像是：
$('#rss-viewer').append(aDocumentFragmentEntry);
要么：
$('#rss-viewer')[0].innerHTML = aDocumentFragmentOfAllEntries.innerHTML;
testing数据
使用这个问题的饲料 ，这篇文章给出了：
<?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="https://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>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="https://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>
处决
使用jQuery的内置XML支持
调用：
$.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()); }); });
打印出来：
------------------------ 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和Google AJAX API
调用：
$.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); }); } } });
打印出来：
------------------------ 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
另一个不赞成 （感谢@daylight）选项，对我来说最简单的（这是我用于SpokenToday.info ）：
Google Feed API不使用JQuery，只需要两个步骤：
-
导入库：
<script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript">google.load("feeds", "1");</script> -
查找/加载Feed（ 文档 ）：
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); }); -
要parsing数据，请检查有关响应格式的文档 。
