栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

如何使用JavaScript解析RSS feed?

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

如何使用JavaScript解析RSS 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](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中成功提取所需的信息后,您可以创建

documentFragment
s(其中
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"> &lt;p&gt;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&#39;t know whether it is possible or not. If any one knows please help me on this. Thanks in advance.&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">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">&lt;h1&gt;Parsing the Feed&lt;/h1&gt;&lt;h3&gt;With jQuery&#39;s jFeed&lt;/h3&gt;&lt;p&gt;Try this, with the &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; plug-in&lt;/p&gt;&lt;pre&gt;&lt;pre&gt;jQuery.getFeed({   url     : FEED_URL,   success : function (feed) {      console.log(feed.title);      // do more stuff here   }});&lt;/pre&gt;&lt;/pre&gt;&lt;h3&gt;With jQuery&#39;s Built-in XML Support&lt;/h3&gt;&lt;pre&gt;&lt;pre&gt;$.get(FEED_URL, function (data) {    $(data).find(&quot;entry&quot;).each(function () { // or &quot;item&quot; or whatever suits your feed        var el = $(this);        console.log(&quot;------------------------&quot;);        console.log(&quot;title      : &quot; + el.find(&quot;title&quot;).text());        console.log(&quot;author     : &quot; + el.find(&quot;author&quot;).text());        console.log(&quot;description: &quot; + el.find(&quot;description&quot;).text());    });});&lt;/pre&gt;&lt;/pre&gt;&lt;h3&gt;With jQuery and the Google AJAX APIs&lt;/h3&gt;&lt;p&gt;Otherwise, &lt;a href=&quot;https://developers.google.com/feed/&quot; rel=&quot;nofollow&quot;&gt;Google&#39;s AJAX Feed API&lt;/a&gt; allows you to get the feed as a JSON object:&lt;/p&gt;&lt;pre&gt;&lt;pre&gt;$.ajax({  url      : document.location.protocol + &#39;//ajax.googleapis.com/ajax/services/feed/load?v=1.0&amp;amp;num=10&amp;amp;callback=?&amp;amp;q=&#39; + enpreURIComponent(FEED_URL),  dataType : &#39;json&#39;,  success  : function (data) {    if (data.responseData.feed &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;/pre&gt;&lt;/pre&gt;&lt;p&gt;But that means you&#39;re relient on them being online and reachable.&lt;/p&gt;&lt;hr&gt;&lt;h1&gt;Building Content&lt;/h1&gt;&lt;p&gt;once you&#39;ve successfully extracted the information you need from the feed, you need to create document fragments containing the elements you&#39;ll want to inject to display your data.&lt;/p&gt;&lt;hr&gt;&lt;h1&gt;Injecting the content&lt;/h1&gt;&lt;p&gt;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.&lt;/p&gt;</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


转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/442249.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号