我需要解析RSS feed(XML版本2.0)并在HTML页面中显示已解析的详细信息。
使用jQuery的jFeed
(不建议这样做,请参阅其他选项。)
jQuery.getFeed({ url : FEED_URL, success : function (feed) { console.log(feed.title); // do more stuff here } });
$.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()); }); });
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=' + 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); }); } } });
但这意味着您依赖它们在线和可访问。
从Feed中成功提取所需的信息后,您可以创建DocumentFragments(其中document.createDocumentFragment()包含document.createElement()要创建的元素(用创建)),以显示数据。
DocumentFragment
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><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>
调用:
$.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:
$.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