Comunidad de diseño web y desarrollo en internet

Lector de feeds RSS en AJAX con JQuery

JQuery es una liviana librería de JavaScript, pensada para interactuar con los elementos de una Web por medio del DOM. Lo que la hace tan especial es su sencillez y su reducido tamaño.

Para que vean cuan sencillo es JQuery, aquí les va este pequeño webtip. Tomando como base el tutorial de scx7:


El cual modifiqué un poco (espero que no le moleste) y lo volví a escribir en JQuery, les recomiendo que lean el tutorial antes de seguir.

El PHP:


Código :

<?php
   [color=olive]//aqui va la URI del blog gestionado por WordPress
   $filename = "http://www.cristalab.com/rss.php";
   header("Content-type:text/xml");
   readfile ($filename);
?>

El XHTML


Código :

<!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>
<script language="JavaScript" type="text/javascript" src="js/jquery.js"></script>
<script language="JavaScript" type="text/javascript" src="js/lector_rss.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="rss">
   <load>Cargando...</load>
</div>
</body>
</html>

El JavaScript


Código :

$(document).ready(function (){[color=olive]//cuando el documento este listo
   var url="blog.php";[color=olive]//inicio la url de donde estará la dirección del rss
   cargar_pagina(url, "#rss");[color=olive]//función que carga el rss (el#, es para indicar que es un id)
});
function cargar_pagina(url,id_contenedor){
   var xml = $.ajax({//comienzo el AJAX y le asigno sus propiedades
      url: url,// la url
      success: function(xml){// cuando tenga éxito
         $(id_contenedor).html("");//borro el mensaje cargando...
         cargar_rss(xml, id_contenedor);//llamo la función que me mostrara las entradas
      }
   });
}
function cargar_rss(xml, id_contenedor){
   var limit = xml.getElementsByTagName('item').length;//obtengo la cantidad de entradas
   var rss = "";//comienzo el string
   for (var l=1; l<=limit; l++){// un for desde 1 hasta la cantidad de entradas
      //obtengo titulo vinculo fecha de publicación y descripción
      var title = xml.getElementsByTagName('title').item(l+1).firstChild.data;
      var url = xml.getElementsByTagName('link').item(l+1).firstChild.data;
      var pubDate = xml.getElementsByTagName('pubDate').item(l-1).firstChild.data;
      var description = xml.getElementsByTagName('description').item(l+1).firstChild.data;
      var date = pubDate.split(" +");//no se para que pero estaba en el tutorial
      rss = "<fecha>"+date[0]+"<fecha><br/><titulo><a href=\""+url+"\">"+title+"</a></titulo><br/><descripcion>"+description+"</descripcion><hr />";//relleno el string con la información
      $(id_contenedor).append(rss);//lo agrego en el contenedor
   }
}

El CSS


Código :

#rss{
   font-size:10px;
   font-family:Verdana, Arial, Helvetica, sans-serif;
   width:800px;
   height:auto;
   padding-left:15px;
   padding-top:40px;
   padding-right:10px;
   border:1px solid #0033FF;
   margin:0 auto;
}
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;
}


Espero les sirva de algo. A mi si me sirvió :)

¿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.

Publica tu comentario

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