Un lector avanzado de noticias en HTML5 con jQuery, JSONP y YQL
Con el lector anterior nos surge la pregunta, ¿y si quiero seleccionar el origen de las noticias desde una fuente que lea un formulario?.
Una sencilla solución puede ser usar la biblioteca jQuery y así poder usar el proxy JSON de Yahoo! y nuestra consulta YQL.
Introducción
jQuery es una librería JavaScript para simplificar las tareas de programación, fácil de usar y de aprender.
Su uso está muy extendido, y así, podemos encontrar grandes empresas como Google, Microsoft, etc.
Se puede descargar desde su homepage.
Para usar jQuery en nuestros proyectos Web, hemos de incluirlo en nuestra sección <HEAD>, ya sea en local, de este modo:
como en remoto (tirando de una CDN -Content Delivery Network- como Google o Microsoft):
El problema, ahora, es que vamos a usar jQuery para cargar la cadena JSON, para eso hacemos la llamada $.getJSON.
Cuando usamos YQL, sus servidores nos devuelve no sólo la cadena JSON, sino un código JavaScript, veamos un ejemplo: vamos a ver qué devuelve el servidor de Yahoo! cuando le hacemos la consulta con wget:
Como en la URL que mando a Yahoo! viene que la función "callback" se llama "mi_funcion", ésta es invocada desde el código que nos devuelven sus servidores, así si miramos el contenido del fichero descargado, veremos lo siguiente:
De esta manera, la función que usemos puede ser algo parecido a esto:
Su uso está muy extendido, y así, podemos encontrar grandes empresas como Google, Microsoft, etc.
Se puede descargar desde su homepage.
Para usar jQuery en nuestros proyectos Web, hemos de incluirlo en nuestra sección <HEAD>, ya sea en local, de este modo:
<head>
<script src="js/jquery-1.11.0.min.js"></script>
</head>
<head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script> </head>
El proxy: JSONP
La filosofía es la misma que comentábamos en el post anterior, donde hacíamos una consulta YQL contra los servidores de Yahoo! y obteníamos como respuesta una cadena JSON con el volcado del fichero XML del la URL del RSS que se le pasaba como argumento.El problema, ahora, es que vamos a usar jQuery para cargar la cadena JSON, para eso hacemos la llamada $.getJSON.
El código JavaScript
¡Manos a la obra!Cuando usamos YQL, sus servidores nos devuelve no sólo la cadena JSON, sino un código JavaScript, veamos un ejemplo: vamos a ver qué devuelve el servidor de Yahoo! cuando le hacemos la consulta con wget:
mi_funcion(
{
"query":{
"count":10,
"created":"2014-03-07T16:04:59Z",
"lang":"en-US",
"results":{
"item":[
{
"title":"Una exnovia testifica que Pistorius disparó al aire mientras conducía",
"link":"http://www.ideal.es/jaen/rc/20140307/deportes/mas-deporte/pistorius_derrumba_jucio_video.xml/pistorius-derrumba-201403071205.html?utm_source=ideal.es&utm_medium=rss&utm_content=ultima-rss&utm_campaign=traffic-rss",
"description":"",
"pubDate":"Fri, 07 Mar 2014 15:53:13 GMT",
"guid":"http://www.ideal.es/jaen/rc/20140307/deportes/mas-deporte/pistorius_derrumba_jucio_video.xml/pistorius-derrumba-201403071205.html?utm_source=ideal.es&utm_medium=rss&utm_content=ultima-rss&utm_campaign=traffic-rss"
},
{
"title":"El Gobierno aprueba la ley que ayudará a salvar empresas viables",
"link":"http://www.ideal.es/jaen/rc/20140307/economia/gobierno-allana-camino-para-201403070151.html?utm_source=ideal.es&utm_medium=rss&utm_content=ultima-rss&utm_campaign=traffic-rss",
"description":"",
"pubDate":"Fri, 07 Mar 2014 15:52:05 GMT",
"guid":"http://www.ideal.es/jaen/rc/20140307/economia/gobierno-allana-camino-para-201403070151.html?utm_source=ideal.es&utm_medium=rss&utm_content=ultima-rss&utm_campaign=traffic-rss"
},
.......
{
"title":"Los expertos creen que la nueva ley podría provocar unos 50.000 abortos clandestinos al año",
"link":"http://www.ideal.es/jaen/rc/20140307/sociedad/nueva-50000-abortos-clandestinos-201403071608.html?utm_source=ideal.es&utm_medium=rss&utm_content=ultima-rss&utm_campaign=traffic-rss",
"description":"",
"pubDate":"Fri, 07 Mar 2014 15:25:57 GMT",
"guid":"http://www.ideal.es/jaen/rc/20140307/sociedad/nueva-50000-abortos-clandestinos-201403071608.html?utm_source=ideal.es&utm_medium=rss&utm_content=ultima-rss&utm_campaign=traffic-rss"
}
]
}
}
}
);
function cambiaRSS() { var nueva_url = document.getElementById('mi_url').value; $.getJSON( "http://query.yahooapis.com/v1/public/yql?q=select * from rss where url=\""+encodeURIComponent(nueva_url)+"\"&format=json&callback=?", function(o) {
var items = o.query.results.item; var output = '<h2>Útimas noticias</h2>'; var no_items=items.length; for(var i=0;i<no_items;i++){ var title = items[i].title; var link = items[i].link; var desc = items[i].description; output += "<h4><a href='" + link + "'>"+title+"</a></h4>" + desc + "<hr/>"; } document.getElementById('resultados').innerHTML = output; } ); }
Llamada desde el formulario
Para cargar la función, podemos usar un evento "onclick", como se ve en el siguiente ejemplo:URL del alimentador: <input type="text" name="URL" id="mi_url"> <button onclick='cambiaRSS()'> Cambiar! </button> <div id='resultados'> Esto será eliminado por los titulares de las noticias. </div>
No hay comentarios:
Publicar un comentario