Lector RSS con AJAX y PHP

El lector RSS se utiliza para leer la fuente RSS.

RSS permite una rápida navegación por noticias y actualizaciones.

Lector RSS AJAX

En el siguiente ejemplo AJAX, demostraremos un lector RSS, a través del cual el contenido de RSS se carga en la página web sin necesidad de recargar.

Seleccione una suscripción de noticias RSS en la lista desplegable a continuación

Seleccione una fuente RSS:

Aquí se lista la fuente RSS.

Este ejemplo incluye tres elementos:

  • Formulario HTML simple
  • JavaScript
  • Página PHP

Formulario HTML

Esta es una página HTML. Contiene un formulario HTML simple y un enlace a un archivo JavaScript:

<html>
<head>
<script type="text/javascript" src="getrss.js"></script>
</head>
<body>
<form> 
Seleccione una fuente RSS:
<select onchange="showRSS(this.value)">
<option value="Google">Noticias Google</option>
<option value="MSNBC">Noticias MSNBC</option>
</select>
</form>
<p><div id="rssOutput">
<b>La fuente RSS se listará aquí.</b></div></p>
</body>
</html>

Ejemplo de explicación - Formulario HTML

Como puede ver, la página HTML superior contiene un formulario HTML simple con una lista desplegable.

Así funciona el formulario:

  1. Cuando el usuario selecciona una opción en el desplegable, se desencadena un evento
  2. Cuando se desencadena un evento, se ejecuta la función showRSS()

Bajo el formulario hay un <div> llamado "rssOutput" que se utiliza como marcador de posición para los datos devueltos por la función showRSS().

JavaScript

El código JavaScript se almacena en "getrss.js" y se conecta al documento HTML:

var xmlHttp
function showRSS(str)
 { 
 xmlHttp = GetXmlHttpObject()
 if (xmlHttp == null)
  {
  alert("El navegador no admite solicitudes HTTP")
  devuelve
  }
 var url = "getrss.php"
 url = url + "?q=" + str
 url = url + "&sid=" + Math.random()
 xmlHttp.onreadystatechange = stateChanged 
 xmlHttp.open("GET", url, true)
 xmlHttp.send(null)
 }
function stateChanged() 
 { 
 if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete")
  { 
  document.getElementById("rssOutput")
  .innerHTML = xmlHttp.responseText 
  } 
 }
function GetXmlHttpObject()
{
var xmlHttp = null;
try
 {
 // Firefox, Opera 8.0+, Safari
 xmlHttp = new XMLHttpRequest();
 }
catch (e)
 {
 // Internet Explorer
 try
  {
  xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
  }
 catch (e)
  {
  xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
 }
devuelve xmlHttp;
}

Ejemplo de explicación:

stateChanged() y la función GetXmlHttpObject con Solicitudes AJAX con PHP El ejemplo en esta sección es el mismo.

Función showRSS()

Cada vez que se selecciona una opción en el desplegable, la función ejecuta:

  1. Definir la url (nombre de archivo) a enviar al servidor
  2. Agregar el parámetro (q) a la url, el contenido del parámetro es la opción seleccionada en el desplegable
  3. Agregar un número aleatorio para evitar que el servidor cachee el archivo
  4. Llamar a la función GetXmlHttpObject para crear un objeto XMLHTTP, y hacer que el objeto ejecute la función stateChanged cuando se desencadene un cambio
  5. Abrir XMLHTTP a través de una url dada
  6. Enviar una solicitud HTTP al servidor

Página PHP

La página del servidor que llama al código JavaScript se llama archivo "getrss.php":

<?php
//obtener el parámetro q de la URL
$q=$_GET["q"];
//descubrir cual de los canales fue seleccionado
if($q=="Google")
 {
 $xml=("http://news.google.com/news?ned=us&topic=h&output=rss");
 }
elseif($q=="MSNBC")
 {
 $xml=("http://rss.msnbc.msn.com/id/3032091/device/rss/rss.xml");
 }
$xmlDoc = new DOMDocument();
$xmlDoc->load($xml);
//obtener elementos de "<channel>"
$channel=$xmlDoc->getElementsByTagName('channel')->item(0);
$channel_title = $channel->getElementsByTagName('title')
->item(0)->childNodes->item(0)->nodeValue;
$channel_link = $channel->getElementsByTagName('link')
->item(0)->childNodes->item(0)->nodeValue;
$channel_desc = $channel->getElementsByTagName('description')
->item(0)->childNodes->item(0)->nodeValue;
//obtener elementos de "<channel>"
echo("<p><a href='" . $channel_link
 . ">" . $channel_title . "</a>");
echo("<br />");
echo($channel_desc . "</p>");
//get and output "<item>" elements
$x=$xmlDoc->getElementsByTagName('item');
for ($i=0; $i<=2; $i++)
 {
 $item_title=$x->item($i)->getElementsByTagName('title')
 ->item(0)->childNodes->item(0)->nodeValue;
 $item_link=$x->item($i)->getElementsByTagName('link')
 ->item(0)->childNodes->item(0)->nodeValue;
 $item_desc=$x->item($i)->getElementsByTagName('description')
 ->item(0)->childNodes->item(0)->nodeValue;
 echo ("<p><a href='" . $item_link
 . "'>" . $item_title . "</a>");
 echo ("<br />");
 echo ($item_desc . "</p>");
 }
?>

Ejemplo de explicación:

Ocurre lo siguiente cuando se envía una opción desde JavaScript:

  1. PHP encontrar qué feed RSS se ha seleccionado
  2. Crear un objeto XML DOM para el feed RSS seleccionado
  3. Encontrar y salida de los elementos de la fuente RSS
  4. Recorrer los elementos de los tres primeros proyectos RSS y realizar la salida