Leitor RSS AJAX e PHP

O leitor de RSS é usado para ler Feeds de RSS.

O RSS permite uma rápida visualização de notícias e atualizações.

Leitor de RSS AJAX

Neste exemplo AJAX, vamos demonstrar um leitor de RSS, onde o conteúdo do RSS é carregado na página sem recarregar a página.

Selecione um subscrever notícias RSS na lista suspensa abaixo

Selecione um Feed de RSS:

Aqui estão listados os Feeds de RSS.

Este exemplo inclui três elementos:

  • Formulário HTML simples
  • JavaScript
  • Página PHP

Formulário HTML

Esta é uma página HTML. Ela contém um formulário HTML simples e um link para executar um arquivo JavaScript:

<html>
<head>
<script type="text/javascript" src="getrss.js"></script>
</head>
<body>
<form> 
Selecione um Feed de RSS:
<select onchange="showRSS(this.value)">
<option value="Google">Google Notícias</option>
<option value="MSNBC">MSNBC Notícias</option>
</select>
</form>
<p><div id="rssOutput">
<b>Feed de RSS será listado aqui.</b></div></p>
</body>
</html>

Explicação do exemplo - formulário HTML

Como você vê, a página HTML superior contém um formulário HTML simples com uma caixa de lista suspensa

Como o formulário funciona:

  1. Um evento é acionado quando o usuário escolhe uma opção na caixa de lista suspensa
  2. A função showRSS() é executada quando um evento é acionado

O formulário abaixo contém um <div> chamado "rssOutput" que serve como marcador para os dados retornados pela função showRSS().

JavaScript

O código JavaScript é armazenado em "getrss.js" e conectado ao documento HTML:

var xmlHttp
function showRSS(str)
 { 
 xmlHttp = GetXmlHttpObject()
 if (xmlHttp == null)
  {
  alert("O navegador não suporta solicitações HTTP")
  return
  }
 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");
  }
 }
retorna xmlHttp;
}

Exemplo de Explicação:

stateChanged() e a função GetXmlHttpObject com Requisição AJAX e PHP Os exemplos neste capítulo são os mesmos.

Função showRSS()

A função é executada sempre que uma seleção é feita na caixa de seleção:

  1. Defina o url (nome do arquivo) a ser enviado ao servidor
  2. Adicione os parâmetros (q) ao url, o conteúdo dos parâmetros é a opção selecionada na caixa de seleção
  3. Adicione um número aleatório para evitar que o servidor cache o arquivo
  4. Chame a função GetXmlHttpObject para criar um objeto XMLHTTP, e avise o objeto para executar a função stateChanged quando um evento for acionado
  5. Abra o XMLHTTP através de um url fornecido
  6. Envie uma solicitação HTTP para o servidor

Página PHP

A página do servidor que chama o código JavaScript é o arquivo PHP chamado "getrss.php":

<?php
//get the q parameter from URL
$q=$_GET["q"];
//find out which feed was selected
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);
//get elements from "<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;
//output elements from "<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>");
 }
?>

Exemplo de Explicação:

Ocorre quando uma opção é enviada pelo JavaScript:

  1. PHP descobre qual feed RSS foi selecionado
  2. Crie um objeto XML DOM para o feed RSS selecionado
  3. Encontre e exiba os elementos da feed RSS
  4. Varre os elementos dos três primeiros projetos RSS e os exibe