Lecteur RSS AJAX et PHP

Le lecteur RSS est utilisé pour lire les flux RSS.

RSS permet de parcourir les nouvelles et les mises à jour rapidement.

Lecteur RSS AJAX

Dans cet exemple AJAX, nous allons démontrer un lecteur RSS qui charge le contenu du RSS sans rafraîchir la page.

Sélectionnez un abonnement RSS news dans la liste ci-dessous

Veuillez choisir un flux RSS :

Voici où le flux RSS est listé.

Cet exemple comprend trois éléments :

  • Formulaire HTML simple
  • JavaScript
  • Page PHP

Formulaire HTML

Ceci est une page HTML. Elle contient un simple formulaire HTML et un lien vers un fichier JavaScript :

<html>
<head>
<script type="text/javascript" src="getrss.js"></script>
</head>
<body>
<form> 
Sélectionnez un flux RSS :
<select onchange="showRSS(this.value)">
<option value="Google">Google News</option>
<option value="MSNBC">MSNBC News</option>
</select>
</form>
<p><div id="rssOutput">
<b>Le flux RSS sera listé ici.</b></div></p>
</body>
</html>

Explication de l'exemple - Formulaire HTML

Comme vous pouvez le voir, la page HTML supérieure contient un simple formulaire HTML avec une liste déroulante.

Fonctionnement du formulaire :

  1. Un événement est déclenché lorsque l'utilisateur sélectionne une option dans la liste déroulante
  2. Lorsque l'événement est déclenché, la fonction showRSS() est exécutée

Sous le formulaire, il y a un <div> nommé "rssOutput" qui sert de conteneur aux données renvoyées par la fonction showRSS().

JavaScript

Le code JavaScript est stocké dans "getrss.js" et est lié au document HTML :

var xmlHttp
function showRSS(str)
 { 
 xmlHttp = GetXmlHttpObject()
 if (xmlHttp == null)
  {
  alert("Le navigateur ne prend pas en charge les requêtes 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");
  }
 }
retourne xmlHttp;
}

Explication de l'exemple :

stateChanged() et la fonction GetXmlHttpObject avec Requêtes AJAX et PHP Les exemples dans cette section sont identiques.

Fonction showRSS()

Cette fonction est appelée à chaque fois que l'utilisateur sélectionne une option dans la liste déroulante:

  1. Définir l'URL (nom de fichier) à envoyer au serveur
  2. Ajouter les paramètres (q) à l'URL, le contenu du paramètre est l'option sélectionnée dans la liste déroulante
  3. Ajouter un nombre aléatoire pour éviter que le serveur ne cache le fichier
  4. Appeler la fonction GetXmlHttpObject pour créer un objet XMLHTTP, et informer cet objet d'exécuter la fonction stateChanged lors d'un changement
  5. Ouvrir XMLHTTP avec l'URL fournie
  6. Envoyer une requête HTTP au serveur

Page PHP

La page serveur qui appelle le code JavaScript s'appelle le fichier PHP nommé "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>");
 }
?>

Explication de l'exemple :

Quand une option est envoyée par JavaScript, cela se produit :

  1. PHP trouver quel flux RSS est sélectionné
  2. Créer un objet XML DOM pour le flux RSS sélectionné
  3. Trouver et afficher les éléments provenant des flux RSS
  4. Parcourir les éléments des trois premiers projets RSS et les afficher