Lettore RSS AJAX e PHP

Il lettore RSS viene utilizzato per leggere i Feed RSS.

RSS permette di esplorare le notizie e gli aggiornamenti rapidamente.

Lettore RSS AJAX

Nell'esempio AJAX sottostante, mostreremo un lettore RSS, attraverso il quale i contenuti degli RSS vengono caricati nella pagina web senza ricaricare la pagina.

Seleziona un abbonamento RSS nella casella di elenco sottostante

Scegli un Feed RSS:

Ecco elencati i Feed RSS.

Questo esempio include tre elementi:

  • Modulo HTML semplice
  • JavaScript
  • Pagina PHP

Modulo HTML

Questa è una pagina HTML. Contiene un semplice modulo HTML e un link all'esecuzione di un file JavaScript:

<html>
<head>
<script type="text/javascript" src="getrss.js"></script>
</head>
<body>
<form> 
Select an RSS-Feed:
<select onchange="showRSS(this.value)">
<option value="Google">Google News</option>
<option value="MSNBC">MSNBC News</option>
</select>
</form>
<p><div id="rssOutput">
<b>RSS Feed will be listed here.</b></div></p>
</body>
</html>

Esempio di spiegazione - Modulo HTML

Come potete vedere, la pagina HTML superiore contiene un modulo HTML semplice con una casella di elenco a discesa.

Come funziona il modulo:

  1. Quando l'utente seleziona un'opzione dal menu a discesa, viene sollevato un evento
  2. Quando viene sollevato un evento, viene eseguita la funzione showRSS()

Sotto il modulo c'è un <div> chiamato "rssOutput" che serve come segnaposto per i dati restituiti dalla funzione showRSS().

JavaScript

Il codice JavaScript è archiviato in "getrss.js" e collegato al documento HTML:

var xmlHttp
function showRSS(str)
 { 
 xmlHttp=GetXmlHttpObject()
 if (xmlHttp==null)
  {
  alert ("Il browser non supporta le richieste 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");
  }
 }
return xmlHttp;
}

Esempio di spiegazione:

stateChanged() e la funzione GetXmlHttpObject con Richiesta AJAX e PHP L'esempio in questa sezione è lo stesso.

Funzione showRSS()

La funzione viene eseguita ogni volta che si seleziona un'opzione nel menu a discesa:

  1. Definire l'URL (nome del file) da inviare al server
  2. Aggiungere i parametri (q) all'URL, il contenuto del parametro è l'opzione selezionata nel menu a discesa
  3. Aggiungere un numero casuale per prevenire la cache del server del file
  4. Chiamare la funzione GetXmlHttpObject per creare l'oggetto XMLHTTP e informare l'oggetto di eseguire la funzione stateChanged quando si verifica un cambiamento
  5. Aprire XMLHTTP tramite l'URL fornito
  6. Inviare una richiesta HTTP al server

Pagina PHP

La pagina server che chiama il codice JavaScript è il file PHP chiamato "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>");
 }
?>

Esempio di spiegazione:

Cosa succede quando un'opzione viene inviata dal JavaScript:

  1. PHP trova quale feed RSS è selezionato
  2. Crea un oggetto XML DOM per il feed RSS selezionato
  3. Trova ed esegui l'output degli elementi provenienti dai feed RSS
  4. Esegui l'elenco degli elementi dei tre primi progetti RSS e esegui l'output