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

Lector de feeds RSS en AJAX

El PHP

El XHTML

El CSS

El JS

Publica tu comentario

o puedes...