Comunidad de diseño web y desarrollo en internet online

Lector de feeds RSS en AJAX

Este es un pequeño lector de RSS utilizando AJAX. Funciona con una dirección feed de un blog gestionado con WordPress o un RSS. Puedes insertarlo en tu web y funcionará en todos los navegadores.

Lee a fondo el texto en verde (Los comentarios) que es donde esta el tutorial en si y toda la explicación de lo que debes hacer.

Nota: Antes de continuar primero debes haberte leido el Tutorial de AJAX.

El PHP

Primero copiamos el xml del blog, en nuestro archivo blog.php, debido a... la seguridad :bofh:

<?php
   //aqui va la URI del RSS
   $filename =  "http://www.scx7.com/blog/feed/ "; 
   header("Content-type:text/xml");
   readfile ($filename);
?>

El XHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"lang="es" xml:lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Lector RSS con AJAX</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script language="JavaScript" type="text/javascript" src="js/rss_reader.js"></script>
</head>
<body>
<div id="rss">
<load>Cargando...</load>
</div>
</body>
</html>

Así es dejamos el div sólo con el mensaje de cargando, el codigo js hará el trabajo sucio. Pero antes de ver el js, veamos el css.

El CSS

#rss{
   background-image:url(images/rss.jpg);
   font-size:10px;
   font-family:Verdana, Arial, Helvetica, sans-serif;
   width:243px;
   height:255px;
   padding-left:15px;
   padding-top:40px;
   padding-right:10px;
   float:left;
   }
titulo{
   font-weight:bold;
   color:#FF0000;
   }
descripcion{
   color:#000000;
   }
fecha{
   color:#999999;
   }
enlace a{
   color:#003399;
   margin-left:180px;
   }
next a{
   color:#006699;
   margin-left:180px;
   text-decoration:none;
   }
load{
   color:#003366;
   }

El JS

Hasta ahora nada nuevo, pero ahora sí lo bueno.

//variable global
var i=1;
//URI: dirección del RSS 2.0 (funciona con WordPress)
var URI='blog.php';
//función: llamarasincrono('URI', 'div-id',i);
llamarasincrono(URI, 'rss',i);
// Esta función cargará la info
function llamarasincrono(url, id_contenedor,N){
var pagina_requerida = false
if (window.XMLHttpRequest) {// Si es Mozilla, Safari etc
pagina_requerida = new XMLHttpRequest()
} else if (window.ActiveXObject){ // pero si es IE
try {
pagina_requerida = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){ // en caso que sea una versión antigua
try{
pagina_requerida = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
} else
return false
pagina_requerida.onreadystatechange=function(){ // función de respuesta
cargarpagina(pagina_requerida, id_contenedor,N)
}
pagina_requerida.open('GET', url, true) // asignamos los métodos open y send
pagina_requerida.send(null)
}
// todo es correcto y ha llegado el momento de poner la información requerida
// en su sitio en la pagina xhtml

function cargarpagina(pagina_requerida, id_contenedor,N){
if (pagina_requerida.readyState == 4 && (pagina_requerida.status==200 || window.location.href.indexOf("http")==-1)){
//usamos la propiedad responseXML: devuelve datos por el servidor en forma de documento XML
var xml = pagina_requerida.responseXML;
//encontramos el total de items en el RSS
var limit = xml.getElementsByTagName('item').length;
//Boton Siguiente
//i es la variable que irá incrementandose

var next = "<next><a href=\"javascript:llamarasincrono(URI, 'rss',i);\">Siguiente</a></next>";
//creamos el string donde irán las etiquetas y los valores
var rss = "";
//for de 2 ciclos, para mostrar 2 entradas a la vez
for (var l=N;l<=N+1;l++){
//cogemos el titulo del primer item, luego del segundo, y así...
var title = xml.getElementsByTagName('title').item(l).firstChild.data;
var url = xml.getElementsByTagName('link').item(l).firstChild.data;
var pubDate = xml.getElementsByTagName('pubDate').item(l).firstChild.data;
var description = xml.getElementsByTagName('description').item(l).firstChild.data;
//si la longitud de la entrada es mayor a 200 caracteres la cortamos y le ponemos un enlace
if(description.length>200) { description = description.substr(0,200)+ "...<br/><enlace><a href=\"" + url + "\">Leer más</a></enlace><br/><br/>"; }else description=description+"<br/><br/>";
//esto es para cortar el +0000 de la fecha en WordPress
var date = pubDate.split(" +");
//sumamos las variables a nuestro string
rss = rss+"<fecha>"+date[0]+"<fecha><br/><titulo>"+title+"</titulo><br/><descripcion>"+description+"</descripcion>";
if (limit==l)
//si nos pasamos del limite, la cortamos
break;
}
//incrementamos la variable global
i=i+2;
//si nos pasamos del límite, volvemos a empezar
if (i>limit)
i=1;
//metemos el string + el boton en el div-id que corresponde
document.getElementById(id_contenedor).innerHTML=rss+next;
//un pequeño mensaje para avisar que se está cargando la info
}else if (pagina_requerida.readyState == 1)
document.getElementById(id_contenedor).innerHTML="<load>Cargando...</load>"
}

Lo nuevo aca vemos "pagina_requerida.responseXML;", esto nos devuleve un objeto xml que luego lo recorremos con las funciones del DOM, es decir con getElementsByTagName lo cual nos queda así "xml.getElementsByTagName('title').item(l).firstChild.data;". Luego sólo le ponemos nuestras propias etiquetas y listo :)

Para mas información, puedes ver el ejemplo en vivo.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Descargar Archivo

Publica tu comentario

El autor de este artículo ha cerrado los comentarios. Si tienes preguntas o comentarios, puedes hacerlos en el foro

Entra al foro y participa en la discusión

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate