解析提要
使用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](https://developers.google.com/feed/)
$.ajax({ url : document.location.protocol + '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&callback=?&q=' + enpreURIComponent(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); }); } }});但这意味着您依赖它们在线和可访问。
建筑内容
从Feed中成功提取所需的信息后,您可以创建
documentFragments(其中
document.createdocumentFragment()包含
document.createElement()要创建的元素(用创建)),以显示数据。
注入内容
选择页面上所需的容器元素,然后将文档片段附加到该容器元素,然后只需使用innerHTML完全替换其内容即可。
就像是:
$('#rss-viewer').append(adocumentFragmentEntry);要么:
$('#rss-viewer')[0].innerHTML = adocumentFragmentOfAllEntries.innerHTML;测试数据
使用此问题的feed,在撰写本文时给出了:
<?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><pre>jQuery.getFeed({ url : FEED_URL, success : function (feed) { console.log(feed.title); // do more stuff here }});</pre></pre><h3>With jQuery's Built-in XML Support</h3><pre><pre>$.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()); });});</pre></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><pre>$.ajax({ url : document.location.protocol + '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&amp;num=10&amp;callback=?&amp;q=' + enpreURIComponent(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); }); } }});</pre></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/1126255description: ------------------------title : Answer by haylem for How to parse a RSS feed using javascript?author : haylem https://stackoverflow.com/users/453590description:
使用jQuery和Google AJAX API
调用:
$.ajax({ url : document.location.protocol + '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&callback=?&q=' + enpreURIComponent('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 : Thirudescription: undefined------------------------title : Answer by haylem for How to parse a RSS feed using javascript?author : haylemdescription: undefined



