Ajax Rss Reader - Un lecteur de flux rss

voici une lecteur de flux rss qui pourrer vous etre utile a vous de voire.

pour faire cela on a besoin de :

en comment tout d'abord par récupérer les informations a afficher (titre et lien de chaque articles disponible dans le fichier rss) sous cet format :

<a href="lien">titre</a>|<a href="lien">titre</a>|<a href="lien">titre</a>...

Fichier getrss.php

  <?php
  include('lastRSS.php');
  $rss = new lastRSS;
  if ($rs = $rss->get($_GET['url'])) {
  $i = 0;
  foreach($rs['items'] as $item) {
  $i++;
  echo "<a href=\"".$item[link]."\" >".$item['title']."</a>|";
  if($i == '15'){
  break;
  }
  }
  }
?>

maintenant que le contenu est récupérer on l'affiche :

on fait appel aux deux  bibliothèque javascript

<script type="text/javascript" src="/js/prototype.js"></script>
  <script type="text/javascript" src="/js/script.aculo.us/scriptaculous.js"></script>

Ensuite  on créer les DIVs qui vont contenir le contenu

document.write('    <div id="title">Ajax Rss Reader</div>');
  document.write('<div id="viewer">');
  document.write('<div id="content">loading...</div>');
  document.write('</div>');

et la fonction se chargera de l'affichage

function ajaxTicker(url){
  $('content').innerHTML = 'Loading feeds ...';
  var ajax = new Ajax.Request('getrss.php',
  {
  method:'get',
  parameters:'url='+url,
  onComplete:showResponse
  });
  function showResponse(request){
  var liste = request.responseText.split('|');
  showContent(0,liste.length);
 
  function showContent(index,end){
  new Effect.Fade('content',{
  duration:0.5,
  afterFinishInternal:function(){
  $('content').innerHTML = liste[index];
  new Effect.Appear('content',{duration:0.5});
  }
  });
  setTimeout(
  function(){
  if(index == (end-1)){
  index = 0;
  showContent(index,end);
  }else{
  showContent(index+1,end);
  }
  },5000);
  }
  }
  }

à la fin il ne reste plus qu'a faire appel a la fonction avec le chemin du flux comme paramètre:

ajaxTicker('http://www.mutationevent.com/rss2.php');

et mettre un petit peu de style et le tour est joué

  <style>
  #title{
  float:left;
  color:#333;
  background-color:#FC0;
  padding:5px;
  font-family:Arial, Helvetica, sans-serif;
  font-size:11px;
  font-weight:bold;
  }
  #viewer{
  clear:left;
  float:left;
  width:400px;
  color:#fff;
  background-color:#333;
  padding:5px;
  font-family:Arial, Helvetica, sans-serif;
  font-size:11px;
  }
  #viewer a{
  color:#fff;
  text-decoration:none;
  }
  #viewer a:hover{
  color:#FC0;
  text-decoration:underline;
  }
  #content{
  float:left;
  }
</style>

Voici la demo

Ajax, Principe

Ajax ou plutôt Asynchronous Javascript And XML. Ce n’est pas un langage mais juste un terme pour designer deux fonctionnalité de javascript. L’avantage avec AJAX est qu’on peut faire des requêtes vers le serveur sans même avoir besoin de recharger la page en question et bien sur la possibilité d’utilisé du XML. Pour pouvoir utilisé AJAX il faut une instance d'une classe , pour InternetExplorer cette instance (XMLHTTP) et appelé via l’objet ActiveX et pour les autres navigateurs basé sur Mozilla c’est avec XMLHttpRequest.

   function getHTTPObject() {
  var xmlhttp;
  /*@cc_on
  @if (@_jscript_version >= 5)
  try {
  xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
  } catch (e) {
  .
  try {
  xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  } catch (E) {
  xmlhttp = false;
  }
  }
  @else
  xmlhttp = false;
  @end @*/
  if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
  try {
  xmlhttp = new XMLHttpRequest();
  } catch (e) {
  xmlhttp = false;
  }
  } return xmlhttp;
  }
  var http = getHTTPObject();

Bien sur on peut faire ça autrement

   if (window.XMLHttpRequest) { // Mozilla, Safari, ...
  http_request = new XMLHttpRequest();
  } else if (window.ActiveXObject) { // IE
  http_request = new ActiveXObject("Microsoft.XMLHTTP");
  }

Maintenant que l’objet est créé, il faut lui indiqué ce qu’il doit faire :

   http.onreadystatechange = mafonction

Puis créer la fonction mafonction Ou inclure directement le code

   http.onreadystatechange = function(){
  // Traitement
  }

A la fin il ne reste plus qu’a lancer la requette :

   //http.open(methode GET ou POST,url, asynchrone true false);
  http.open("GET","page.php,true);
  http.send(null);

Dans ce cas nous avons utilisé la méthode GET comme premier paramètres pour open(), vous pouvez utilisé aussi POST, sauf qu’il faut changé le null et send() par les données que vous voulez envoyé Var1=valeur&var2=valeur2 Tout ce qui reste a faire c’est de vérifier si notre réponse est arrivée a bon port pour cela on va appelé (readyState) - 0 : non initialisée - 1 : en cours de chargement - 2 : chargée - 3 : en cours d'interaction - 4 : terminée

   if (http.readyState == 4) {
  //ok
  results = http.responseText;
  }

On a utilisé (http.responseText) pour récupérer le résultat au format texte mais vous pouvez aussi le récupéré au format XML avec (http.responseXML) exemple

egoSurf, trouver le classement de vos blogs

egoSurf effectue une recherche sur google, yahoo, msn,del.icio.us, et  technorati à partir des certains mots clé et votre nom de domaine et il  vous livre en temps réel votre egoRanking et vos egoPoints. egosurf
1