javascript - jquery rss
Cómo analizar un feed RSS usando JavaScript? (2)
Necesito analizar una fuente RSS (XML versión 2.0) y mostrar los detalles analizados en una página HTML.
Analizando el Feed
Con jQuery ''s jFeed
(Realmente no lo recomiendo, vea las otras opciones).
jQuery.getFeed({
url : FEED_URL,
success : function (feed) {
console.log(feed.title);
// do more stuff here
}
});
Con el soporte XML jQuery de jQuery
$.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());
});
});
Con jQuery y la API de Google AJAX 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);
});
}
}
});
Pero eso significa que estás seguro de que están en línea y accesibles.
Crear contenido
Una vez que haya extraído con éxito la información que necesita del feed, podría crear DocumentFragment s (con document.createDocumentFragment() contiene los elementos (creados con document.createElement() ) que desea inyectar para mostrar sus datos.
Inyectando el contenido
Seleccione el elemento contenedor que desee en la página y anexe los fragmentos de su documento, y simplemente use innerHTML para reemplazar su contenido por completo.
Algo como:
$(''#rss-viewer'').append(aDocumentFragmentEntry);
o:
$(''#rss-viewer'')[0].innerHTML = aDocumentFragmentOfAllEntries.innerHTML;
Datos de prueba
Usando el feed de esta pregunta , que a partir de este escrito da:
<?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? - </title>
<link rel="self" href="https://.com/feeds/question/10943544" type="application/atom+xml" />
<link rel="hub" href="http://pubsubhubbub.appspot.com/" />
<link rel="alternate" href="https://.com/q/10943544" type="text/html" />
<subtitle>most recent 30 from .com</subtitle>
<updated>2012-06-08T06:36:47Z</updated>
<id>https://.com/feeds/question/10943544</id>
<creativeCommons:license>http://www.creativecommons.org/licenses/by-sa/3.0/rdf</creativeCommons:license>
<entry>
<id>https://.com/q/10943544</id>
<re:rank scheme="http://.com">2</re:rank>
<title type="text">How to parse a RSS feed using javascript?</title>
<category scheme="https://.com/feeds/question/10943544/tags" term="javascript"/><category scheme="https://.com/feeds/question/10943544/tags" term="html5"/><category scheme="https://.com/feeds/question/10943544/tags" term="jquery-mobile"/>
<author>
<name>Thiru</name>
<uri>https://.com/users/1126255</uri>
</author>
<link rel="alternate" href="https://.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://.com/questions/10943544/-/10943610#10943610</id>
<re:rank scheme="http://.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://.com/users/453590</uri>
</author>
<link rel="alternate" href="https://.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>
Ejecuciones
Uso del soporte XML integrado de jQuery
Invocar:
$.get(''https://.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());
});
});
Imprime:
------------------------
title : How to parse a RSS feed using javascript?
author :
Thiru
https://.com/users/1126255
description:
------------------------
title : Answer by haylem for How to parse a RSS feed using javascript?
author :
haylem
https://.com/users/453590
description:
Usando jQuery y las API de Google AJAX
Invocar:
$.ajax({
url : document.location.protocol + ''//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&callback=?&q='' + encodeURIComponent(''https://.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);
});
}
}
});
Imprime:
------------------------
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
Otra opción obsoleta (gracias a @daylight) , y la más fácil para mí (esto es lo que estoy usando para SpokenToday.info ):
La API de Google Feed sin usar JQuery y con solo 2 pasos:
Importar la biblioteca:
<script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript">google.load("feeds", "1");</script>Buscar / cargar feeds ( documentation ):
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); });Para analizar datos, consulte la documentación sobre el formato de respuesta .