如何使用JavaScript解析RSS提要？ [英] How to parse an RSS feed using JavaScript?
本文介绍了如何使用JavaScript解析RSS提要？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我需要解析一个RSS提要（XML版本2.0），并将解析后的详细信息显示在HTML页面中。 解析Feed
使用 jQuery 的 jFeed
（不要）
jQuery.getFeed（{
url： FEED_URL，
成功：函数（feed）{
console.log（feed.title）;
//在这里做更多的事情
}
}）;
With jQuery 的内置XML支持
$。get（FEED_URL，function（data）{
$（data）.find（entry）。each（function（）{//或item或其他适合您的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（））;
}）;
}）;
With jQuery 和 Google AJAX Feed API
$。ajax（{
url：document.location.protocol +'//ajax.googleapis.com/ajax/services/feed/load? = 1.0& num = 10& callback =？& q ='+ encodeURIComponent（FEED_URL），
dataType：'json'，
success：function（data）{
if .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）;
}）;
}
}
}）;
但是，这意味着您可以随时在线并且可以到达。
建筑物内容
一旦您从提要中成功提取了所需的信息，您可以创建 DocumentFragment s（与 document.createDocumentFragment（） 包含元素（使用 document.createElement（）创建） ）您将要注入以显示您的数据。
注入内容（code>
在页面上选择所需的容器元素并将文档片段添加到该元素，并简单地使用innerHTML完全替换其内容。
$（'＃rss-viewer'）。append（aDocumentFragmentEntry）;
或：
$（'＃rss-viewer'）[0] .innerHTML = aDocumentFragmentOfAllEntries.innerHTML;
测试数据
使用此问题提要，在撰写本文时给出：
<？xml version =1.0encoding =utf-8？>
< feed xmlns =http://www.w3.org/2005/Atomxmlns：creativeCommons =http://backend.userland.com/creativeCommonsRssModulexmlns：re =http：// purl.org/atompub/rank/1.0\">
< title type =text>如何使用javascript解析RSS feed？ - 堆栈溢出< / title>
< link rel =selfhref =https://stackoverflow.com/feeds/question/10943544type =application / atom + xml/>
< link rel =hubhref =http://pubsubhubbub.appspot.com//>
< link rel =alternatehref =https://stackoverflow.com/q/10943544type =text / html/>
< subtitle>最近30个来自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>如何使用javascript解析RSS提要？< / title>
< category scheme =https://stackoverflow.com/feeds/question/10943544/tagsterm =javascript/>< category scheme =https://stackoverflow.com/feeds/问题/ 10943544 / tagsterm =html5/>< category scheme =https://stackoverflow.com/feeds/question/10943544/tagsterm =jquery-mobile/>
< author>
<名称> Thiru< /名称>
< uri> https：//stackoverflow.com/users/1126255< / uri>
< / author>
< link rel =alternatehref =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>
& lt; p& gt;我需要使用XML解析RSS-Feed（XML版本2.0），并且我想在HTML页面中显示解析的细节，我尝试了很多方法。但它不工作。我的系统是在代理下运行的，因为我是这个领域的新手，我不知道它是否可行。如果有人知道，请帮助我。在此先感谢。& 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>通过haylem获取如何使用javascript解析RSS feed？< / title>
< author>
< name> haylem< / name>
< uri> https：//stackoverflow.com/users/453590< / uri>
< / author>
< link rel =alternatehref =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>& lt; h1& gt;解析Feed& lt; / h1& gt;
& lt; h3& gt;使用jQuery的jFeed< / h3& gt;
& lt; p& gt;尝试使用& 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;插件&安培; LT; / P&安培; GT;
& lt; pre& gt;& lt; code& gt; jQuery.getFeed（{
url：FEED_URL，
success：function（feed）{
console.log（feed.title）;
//在这里做更多的事情
}
}）;
& lt; / code& gt;& lt; / pre& gt;
& lt; h3& gt;使用jQuery的内置XML支持& lt; / h3& gt;
& lt; pre& gt;< code& gt; $。get（FEED_URL，function（data）{
$（data）.find（& （函数（）{//或& quot; item& quot;或其他适合您的提要
var el = $（this）;
console）的内容。日志（& quot; ------------------------& quot;）;
console.log（& quot; title： & quot; + el.find（& quot; title& quot;）。text（））;
console.log（& quot; author：& quot; + el.find（& quot; quot （）; author& quot;）。text（））;
console.log（& quot; description：& quot; + el.find（& quot; description& quot;）.text（））;
}）;
}）;
& lt; / code& gt;& lt; / pre& gt;使用jQuery和Google AJAX API< / h3& gt;
& lt; p& gt;否则，& lt; a href =& quot; https：//developers.google.com/feed/& quot; Google的AJAX Feed API< / a& gt;<><允许您将提要作为JSON对象获取：& lt; / p& gt;
& lt; pre& gt;< code& gt; $。ajax（{
url：document.location.protocol +&＃39; // ajax。 googleapis.com/ajax/services/feed/load?v=1.0&amp;num=10&amp;callback=?&amp;q=' + encodeURIComponent（FEED_URL） ，
dataType：& json&＃39;;
成功：函数（数据）{
if（data.responseData.feed& amp; amp; amp; amp; amp; amp; amp; amp; amp; 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;但这意味着您可以依赖他们在线且可以访问。& lt; / p& gt;
& lt; hr& gt;
& lt; h1& gt;建筑物内容& lt; / h1& gt;
& lt; p& gt;一旦您已成功从资讯提供中提取您需要的资讯，您需要建立文件片段，其中包含您想要的元素注入以显示您的数据。& lt; / p& gt;
& lt; hr& gt;
& lt; h1& gt;注入内容& lt; / h1& gt;
& lt; p& gt;在页面上选择所需的容器元素并将文档片段添加到该元素，然后使用innerHTML完全替换其内容。& lt; / p& amp ; GT;
< / summary>
< / entry>< / feed>
执行
使用jQuery内置XML支持
调用：
$ .get（'https://stackoverflow.com/feeds/question/10943544'，function（data）{
$（data）.find（entry）。each（function（）{//或item或任何适合你的feed的元素
var el = $（this）;
console.log（----------------- ）;
console.log（title：+ el.find（title）。text（））;
console.log（author：+文本（））;
console.log（description：+ el.find（description）。text（））;
}）;
}）;
打印出来：
------------------------
title：如何解析RSS feed JavaScript的？
作者：
Thiru
https://stackoverflow.com/users/1126255
描述：
---------- ---------------
标题：通过回答haylem如何解析使用javascript的RSS feed？
作者：
haylem
https://stackoverflow.com/users/453590
描述：
$ b 使用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。条目，函数（i，e）{
console.log（------------------------）;
console .log（title：+ e.title）;
console.log（author：+ e.author）;
console.log（description：+ e.description）;
}）;
}
}
}）;
打印出来：
------------------------
title：如何解析RSS feed JavaScript的？
作者：Thiru
描述：undefined
------------------------
标题：通过回答haylem如何使用javascript解析RSS feed？
作者：haylem
描述：undefined
I need to parse an RSS feed (XML version 2.0) and display the parsed details in an HTML page.
解决方案
Parsing the Feed
With jQuery's jFeed
(Don't really recommend that one, see the other options.)
jQuery.getFeed({
url : FEED_URL,
success : function (feed) {
console.log(feed.title);
// do more stuff here
}
});
With jQuery's Built-in XML Support
$.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());
});
});
With jQuery and the 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);
});
}
}
});
But that means you're relient on them being online and reachable.
Building Content
Once you've successfully extracted the information you need from the feed, you could create DocumentFragments (with document.createDocumentFragment() containing the elements (created with document.createElement()) you'll want to inject to display your data.
Injecting the content
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.
Something like:
$('#rss-viewer').append(aDocumentFragmentEntry);
or:
$('#rss-viewer')[0].innerHTML = aDocumentFragmentOfAllEntries.innerHTML;
Test Data
Using this question's feed, which as of this writing gives:
<?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>
Executions
Using jQuery's Built-in XML Support
Invoking:
$.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());
});
});
Prints out:
------------------------
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:
Using jQuery and the Google AJAX APIs
Invoking:
$.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);
});
}
}
});
Prints out:
------------------------
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
这篇关于如何使用JavaScript解析RSS提要？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
