read - Parse RSS con jQuery
parsing xml with javascript (20)
Quiero usar jQuery para analizar canales RSS. ¿Se puede hacer esto con la biblioteca jQuery base fuera de la caja o necesitaré usar un complemento?
ACTUALIZACIÓN [ 25/04/2016 ] Ahora, una versión mejor escrita y totalmente compatible con más opciones y capacidades alojadas en GitHub.jQRSS
Vi la respuesta seleccionada por , sin embargo, el enlace de la página del complemento jQuery aún está abajo y la página de inicio de ese sitio no parece cargarse. Probé algunas otras soluciones y encontré que la mayoría de ellas eran, no solo anticuadas, sino FÁCILES . Así que tiré mi sombrero ahí e hice mi propio complemento, y con los enlaces muertos aquí, este parece ser un gran lugar para enviar una respuesta. Si está buscando esta respuesta en 2012 (pronto a 2013) puede notar la frustración de los enlaces muertos y los viejos consejos aquí, como lo hice yo. ¡A continuación hay un enlace a mi ejemplo de complemento moderno , así como el código del complemento! Simplemente copie el código en un archivo JS y vincúlelo en su encabezado como cualquier otro complemento. ¡El uso es EXTREMADAMENTE EZ!
jsFiddle
Código de complemento
2/9/2015 - ¡se realizó una actualización atrasada desde hace mucho tiempo para verificar laconsoleantes de enviarle comandos! Debería ayudar con problemas más antiguos de IE.
(function($) {
if (!$.jQRSS) {
$.extend({
jQRSS: function(rss, options, func) {
if (arguments.length <= 0) return false;
var str, obj, fun;
for (i=0;i<arguments.length;i++) {
switch(typeof arguments[i]) {
case "string":
str = arguments[i];
break;
case "object":
obj = arguments[i];
break;
case "function":
fun = arguments[i];
break;
}
}
if (str == null || str == "") {
if (!obj[''rss'']) return false;
if (obj.rss == null || obj.rss == "") return false;
}
var o = $.extend(true, {}, $.jQRSS.defaults);
if (typeof obj == "object") {
if ($.jQRSS.methods.getObjLength(obj) > 0) {
o = $.extend(true, o, obj);
}
}
if (str != "" && !o.rss) o.rss = str;
o.rss = escape(o.rss);
var gURL = $.jQRSS.props.gURL
+ $.jQRSS.props.type
+ "?v=" + $.jQRSS.props.ver
+ "&q=" + o.rss
+ "&callback=" + $.jQRSS.props.callback;
var ajaxData = {
num: o.count,
output: o.output,
};
if (o.historical) ajaxData.scoring = $.jQRSS.props.scoring;
if (o.userip != null) ajaxData.scoring = o.userip;
$.ajax({
url: gURL,
beforeSend: function (jqXHR, settings) { if (window[''console'']) { console.log(new Array(30).join(''-''), "REQUESTING RSS XML", new Array(30).join(''-'')); console.log({ ajaxData: ajaxData, ajaxRequest: settings.url, jqXHR: jqXHR, settings: settings, options: o }); console.log(new Array(80).join(''-'')); } },
dataType: o.output != "xml" ? "json" : "xml",
data: ajaxData,
type: "GET",
xhrFields: { withCredentials: true },
error: function (jqXHR, textStatus, errorThrown) { return new Array("ERROR", { jqXHR: jqXHR, textStatus: textStatus, errorThrown: errorThrown } ); },
success: function (data, textStatus, jqXHR) {
var f = data[''responseData''] ? data.responseData[''feed''] ? data.responseData.feed : null : null,
e = data[''responseData''] ? data.responseData[''feed''] ? data.responseData.feed[''entries''] ? data.responseData.feed.entries : null : null : null
if (window[''console'']) {
console.log(new Array(30).join(''-''), "SUCCESS", new Array(30).join(''-''));
console.log({ data: data, textStatus: textStatus, jqXHR: jqXHR, feed: f, entries: e });
console.log(new Array(70).join(''-''));
}
if (fun) {
return fun.call(this, data[''responseData''] ? data.responseData[''feed''] ? data.responseData.feed : data.responseData : null);
}
else {
return { data: data, textStatus: textStatus, jqXHR: jqXHR, feed: f, entries: e };
}
}
});
}
});
$.jQRSS.props = {
callback: "?",
gURL: "http://ajax.googleapis.com/ajax/services/feed/",
scoring: "h",
type: "load",
ver: "1.0"
};
$.jQRSS.methods = {
getObjLength: function(obj) {
if (typeof obj != "object") return -1;
var objLength = 0;
$.each(obj, function(k, v) { objLength++; })
return objLength;
}
};
$.jQRSS.defaults = {
count: "10", // max 100, -1 defaults 100
historical: false,
output: "json", // json, json_xml, xml
rss: null, // url OR search term like "Official Google Blog"
userip: null
};
}
})(jQuery);
UTILIZAR
// Param ORDER does not matter, however, you must have a link and a callback function
// link can be passed as "rss" in options
// $.jQRSS(linkORsearchString, callbackFunction, { options })
$.jQRSS(''someUrl.xml'', function(feed) { /* do work */ })
$.jQRSS(function(feed) { /* do work */ }, ''someUrl.xml'', { count: 20 })
$.jQRSS(''someUrl.xml'', function(feed) { /* do work */ }, { count: 20 })
$.jQRSS({ count: 20, rss: ''someLink.xml'' }, function(feed) { /* do work */ })
$ .jQRSS (''Buscar palabras aquí en lugar de un enlace'', función (feed) {/ * do work * /}) // TODO: Necesita solución
Opciones
{
count: // default is 10; max is 100. Setting to -1 defaults to 100
historical: // default is false; a value of true instructs the system to return any additional historical entries that it might have in its cache.
output: // default is "json"; "json_xml" retuns json object with xmlString / "xml" returns the XML as String
rss: // simply an alternate place to put news feed link or search terms
userip: // as this uses Google API, I''ll simply insert there comment on this:
/* Reference: https://developers.google.com/feed/v1/jsondevguide
This argument supplies the IP address of the end-user on
whose behalf the request is being made. Google is less
likely to mistake requests for abuse when they include
userip. In choosing to utilize this parameter, please be
sure that you''re in compliance with any local laws,
including any laws relating to disclosure of personal
information being sent.
*/
}
Estoy usando jquery con yql para la alimentación. Puedes recuperar twitter, rss, buzz con yql. Leí de http://tutorialzine.com/2010/02/feed-widget-jquery-css-yql/ . Es muy útil para mi.
Para aquellos de nosotros que llegamos tarde a la discusión, a partir de 1.5 jQuery tiene capacidades de análisis XML integradas, lo que hace que sea muy fácil hacerlo sin complementos o servicios de terceros. Tiene una función parseXml y también analizará automáticamente xml cuando se use la función $ .get. P.ej:
$.get(rssurl, function(data) {
var $xml = $(data);
$xml.find("item").each(function() {
var $this = $(this),
item = {
title: $this.find("title").text(),
link: $this.find("link").text(),
description: $this.find("description").text(),
pubDate: $this.find("pubDate").text(),
author: $this.find("author").text()
}
//Do something with item here...
});
});
También puedes usar github.com/sdepold/jquery-rss , que viene con una plantilla agradable y es muy fácil de usar:
$("#your-div").rss("http://www.recruiter.com/feed/career.xml", {
limit: 3,
layoutTemplate: ''<ul class="inline">{entries}</ul>'',
entryTemplate: ''<li><a href="{url}">[{author}@{date}] {title}</a><br/>{shortBodyPlain}</li>''
})
rendimientos (a partir del 18 de septiembre de 2013):
<div id="your-div">
<ul class="inline">
<entries></entries>
</ul>
<ul class="inline">
<li><a href="http://www.recruiter.com/i/when-to-go-over-a-recruiter%e2%80%99s-head/">[@Tue, 10 Sep 2013 22:23:51 -0700] When to Go Over a Recruiter''s Head</a><br>Job seekers tend to have a certain "fear" of recruiters and hiring managers, and I mean fear in the reverence and respect ...</li>
<li><a href="http://www.recruiter.com/i/the-perfect-job/">[@Tue, 10 Sep 2013 14:52:40 -0700] The Perfect Job</a><br>Having long ago dealt with the "perfect resume" namely God''s, in a previous article of mine, it makes sense to consider the ...</li>
<li><a href="http://www.recruiter.com/i/unemployment-benefits-applications-remain-near-5-year-low-decline-again/">[@Mon, 09 Sep 2013 12:49:17 -0700] Unemployment Benefits Applications Remain Near 5-Year Low, Decline Again</a><br>As reported by the U.S. Department of Labor, the number of workers seeking unemployment benefits continued to sit near ...</li>
</ul>
</div>
Vea http://jsfiddle.net/jhfrench/AFHfn/ para un ejemplo de trabajo.
Te aconsejo que uses FeedEk . Una vez que la API de Google Feed está oficialmente en desuso, la mayoría de los complementos no funcionan. Pero FeedEk sigue funcionando. Es muy fácil de usar y tiene muchas opciones para personalizar.
$(''#divRss'').FeedEk({
FeedUrl:''http://jquery-plugins.net/rss''
});
Con opciones
$(''#divRss'').FeedEk({
FeedUrl:''http://jquery-plugins.net/rss'',
MaxCount : 5,
ShowDesc : true,
ShowPubDate:true,
DescCharacterLimit:100,
TitleLinkTarget:''_blank'',
DateFormat: ''MM/DD/YYYY'',
DateFormatLang:''en''
});
Use Google AJAX Feed API a menos que sus datos RSS sean privados. Es rápido, por supuesto.
Utilice google ajax api , almacenado en caché por google y cualquier formato de salida que desee.
Muestra de código http://code.google.com/apis/ajax/playground/#load_feed
<script src="http://www.google.com/jsapi?key=AIzaSyA5m1Nc8ws2BbmPRwKu5gFradvD_hgq6G0" type="text/javascript"></script>
<script type="text/javascript">
/*
* How to load a feed via the Feeds API.
*/
google.load("feeds", "1");
// Our callback function, for when a feed is loaded.
function feedLoaded(result) {
if (!result.error) {
// Grab the container we will put the results into
var container = document.getElementById("content");
container.innerHTML = '''';
// Loop through the feeds, putting the titles onto the page.
// Check out the result object for a list of properties returned in each entry.
// http://code.google.com/apis/ajaxfeeds/documentation/reference.html#JSON
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
var div = document.createElement("div");
div.appendChild(document.createTextNode(entry.title));
container.appendChild(div);
}
}
}
function OnLoad() {
// Create a feed instance that will grab Digg''s feed.
var feed = new google.feeds.Feed("http://www.digg.com/rss/index.xml");
// Calling load sends the request off. It requires a callback function.
feed.load(feedLoaded);
}
google.setOnLoadCallback(OnLoad);
</script>
jFeed es algo obsoleto, trabajando solo con versiones anteriores de jQuery. Han pasado dos años desde su actualización.
zRSSFeed es quizás un poco menos flexible, pero es fácil de usar y funciona con la versión actual de jQuery (actualmente 1.4). zRSSFeed
Aquí hay un ejemplo rápido de los documentos de zRSSFeed:
<div id="test"><div>
<script type="text/javascript">
$(document).ready(function () {
$(''#test'').rssfeed(''http://feeds.reuters.com/reuters/oddlyEnoughNews'', {
limit: 5
});
});
</script>
jFeed es fácil y tiene un example para que pruebes. Pero si está analizando una fuente de otro servidor, deberá permitir el uso compartido de recursos de origen cruzado (CORS) en el servidor de la fuente. También necesitarás verificar el soporte del navegador .
Cargué la muestra pero aún no recibí soporte de IE en ninguna versión cuando cambié la url en el ejemplo a algo como example.com/feed.rss a través del protocolo http. CORS debería ser compatible con IE 8 y superior, pero el ejemplo jFeed no generó el feed.
Su mejor apuesta es utilizar la API de Google:
https://developers.google.com/feed/v1/devguide
Ver:
https://github.com/jfhovinne/jFeed
http://en.wikipedia.org/wiki/Cross-origin_resource_sharing
http://en.wikipedia.org/wiki/Same_origin_policy
http://caniuse.com/cors
jFeed no funciona en IE.
Utilice zRSSFeed . Lo tenía funcionando en 5 minutos.
function getFeed(sender, uri) {
jQuery.getFeed({
url: ''proxy.php?url='' + uri,
success: function(feed) {
jQuery(sender).append(''<h2>''
+ ''<a href="''
+ feed.link
+ ''">''
+ feed.title
+ ''</a>''
+ ''</h2>'');
var html = '''';
for(var i = 0; i < feed.items.length && i < 5; i++) {
var item = feed.items[i];
html += ''<h3>''
+ ''<a href="''
+ item.link
+ ''">''
+ item.title
+ ''</a>''
+ ''</h3>'';
html += ''<div class="updated">''
+ item.updated
+ ''</div>'';
html += ''<div>''
+ item.description
+ ''</div>'';
}
jQuery(sender).append(html);
}
});
}
<div id="getanewbrowser">
<script type="text/javascript">
getFeed($("#getanewbrowser"), ''http://feeds.feedburner.com/getanewbrowser'')
</script>
</div>
Superfeedr tiene un plugin jquery que lo hace muy bien. No tendrá ningún problema de política de origen cruzado y las actualizaciones se propagarán en tiempo real.
zazar.net/developers/jquery/zrssfeed se basa en jQuery y el tema simple es impresionante.
Darle una oportunidad.
jQuery Feeds es una buena opción, tiene un sistema de plantillas incorporado y utiliza la API de Google Feed, por lo que tiene soporte entre dominios.
Use jFeed - un plugin jQuery RSS / Atom. Según los documentos, es tan simple como:
jQuery.getFeed({
url: ''rss.xml'',
success: function(feed) {
alert(feed.title);
}
});
github.com/sdepold/jquery-rss es bastante ligero y no impone ningún estilo en particular.
La sintaxis puede ser tan simple como
$("#rss-feeds").rss("http://www.recruiter.com/feed/career.xml")
ADVERTENCIA
La API de Google Feed está oficialmente obsoleta y ya no funciona .
No hay necesidad de un plugin completo. Esto devolverá su RSS como un objeto JSON a una función de devolución de llamada:
function parseRSS(url, callback) {
$.ajax({
url: document.location.protocol + ''//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&callback=?&q='' + encodeURIComponent(url),
dataType: ''json'',
success: function(data) {
callback(data.responseData.feed);
}
});
}
Estoy de acuerdo con @Andrew , usar Google es una forma sólida y reutilizable de hacerlo con el enorme beneficio de que obtengas JSON en lugar de XML. Una ventaja adicional del uso de Google como proxy es que es poco probable que los servicios que podrían bloquear su acceso directo a sus datos detengan a Google. Aquí hay un ejemplo usando el informe de esquí y los datos de condiciones. Esto tiene todas las aplicaciones comunes del mundo real: 1) RSS / XML de terceros 2) JSONP 3) Limpieza de cadenas y cadena a matriz cuando no puede obtener los datos exactamente de la forma que desea 4) en la carga agregue elementos a la DOM. ¡Espero que esto ayude a algunas personas!
<!-- Load RSS Through Google as JSON using jQuery -->
<script type="text/javascript">
function displaySkiReport (feedResponse) {
// Get ski report content strings
var itemString = feedResponse.entries[0].content;
var publishedDate = feedResponse.entries[0].publishedDate;
// Clean up strings manually as needed
itemString = itemString.replace("Primary: N/A", "Early Season Conditions");
publishedDate = publishedDate.substring(0,17);
// Parse ski report data from string
var itemsArray = itemString.split("/");
//Build Unordered List
var html = ''<h2>'' + feedResponse.entries[0].title + ''</h2>'';
html += ''<ul>'';
html += ''<li>Skiing Status: '' + itemsArray[0] + ''</li>'';
// Last 48 Hours
html += ''<li>'' + itemsArray[1] + ''</li>'';
// Snow condition
html += ''<li>'' + itemsArray[2] + ''</li>'';
// Base depth
html += ''<li>'' + itemsArray[3] + ''</li>'';
html += ''<li>Ski Report Date: '' + publishedDate + ''</li>'';
html += ''</ul>'';
$(''body'').append(html);
}
function parseRSS(url, callback) {
$.ajax({
url: document.location.protocol + ''//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&callback=?&q='' + encodeURIComponent(url),
dataType: ''json'',
success: function(data) {
callback(data.responseData.feed);
}
});
}
$(document).ready(function() {
// Ski report
parseRSS("http://www.onthesnow.com/michigan/boyne-highlands/snow.rss", displaySkiReport);
});
</script>
(function(url, callback) {
jQuery.ajax({
url: document.location.protocol + ''//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&callback=?&q='' + encodeURIComponent(url),
dataType: ''json'',
success: function(data) {
callback(data.responseData.feed);
}
});
})(''http://news.hitb.org/rss.xml'', function(feed){ // Change to desired URL
var entries = feed.entries, feedList = '''';
for (var i = 0; i < entries.length; i++) {
feedList +=''<li><a href="'' + entries[i].link + ''">'' + entries[i].title + ''</a></li>'';
}
jQuery(''.feed > ul'').append(feedList);
});
<div class="feed">
<h4>Hacker News</h4>
<ul></ul>
</div>
<script type="text/javascript" src="./js/jquery/jquery.js"></script>
<script type="text/javascript" src="./js/jFeed/build/dist/jquery.jfeed.pack.js"></script>
<script type="text/javascript">
function loadFeed(){
$.getFeed({
url: ''url=http://sports.espn.go.com/espn/rss/news/'',
success: function(feed) {
//Title
$(''#result'').append(''<h2><a href="'' + feed.link + ''">'' + feed.title + ''</a>'' + ''</h2>'');
//Unordered List
var html = ''<ul>'';
$(feed.items).each(function(){
var $item = $(this);
//trace( $item.attr("link") );
html += ''<li>'' +
''<h3><a href ="'' + $item.attr("link") + ''" target="_new">'' +
$item.attr("title") + ''</a></h3> '' +
''<p>'' + $item.attr("description") + ''</p>'' +
// ''<p>'' + $item.attr("c:date") + ''</p>'' +
''</li>'';
});
html += ''</ul>'';
$(''#result'').append(html);
}
});
}
</script>