Exemple Ajax : Le flux RSS
Si vous rêvez de vous fabriquer votre propre lecteur de flux RSS, alors voici une solution plutôt intéressante. En effet, nous allons cette fois charger le contenu d’un flux pour le présenter sur une page HTML classique dans une section <div> prédéfinie. Il sera possible de préciser le nombre de titres que l’on souhaite télécharger, leur date de publication ainsi qu’une brève description. Enfin, le gâteau sur la cerise : une pagination ajaxée du contenu du flux !
Cette opération se déroule en deux temps.
Du côté serveur, notre script, RSS Display Box, utilise SimplePie, un analyseur de données écrit en PHP qui se chargera de récupérer le flux RSS. En effet, dans la mesure où ce flux n’est pas local, un simple JavaScript ne saurait être en mesure d’effectuer ce processus. En revanche, une fois le flux récupéré, le JavaScript permet d’utiliser de l’Ajax pour le présenter sur une page HTML.
S’il est nécessaire que votre serveur soit capable d‘interpréter le langage PHP, le flux peut être présenté sur n’importe quel type de page .html ou .php.
Avant d’entrer dans les détails, voici un exemple (2 d) en action – Télécharger l’exemple.
Notre script contient : index.html, un dossier simplepie et un dossier rssbox.
a) Commençons par localiser le fichier main.php dans le dossier rssbox. Voici ce qui nous intéresse :
$rsslist=array(“zebulon” => “http://rss.zebulon.fr/feed/zebulon/actualites”);
Ici, nous avons spécifié que le flux RSS de Zebulon.fr était rattaché à l’identifiant “zebulon”.
b) Entre les balises <head> de notre fichier .html, sur lequel le flux apparaîtra, nous avons construit trois liens.
<link rel=”stylesheet” type=”text/css” href=”rssbox/rssdisplaybox.css” /><script type=”text/javascript” src=”rssbox/virtualpaginate.js”></script><script type=”text/javascript” src=”rssbox/rssdisplaybox.js”</script>
Le premier lien redirige vers une feuille de style, le second lien est nécessaire pour obtenir l’effet de pagination, enfin, le troisième est le plus important, il s’agit du script par lequel le flux RSS sera présenté en Ajax sur notre page.
c) Ensuite, sur ce même fichier .html, dans le corps de la page (<body>), voici de quelle manière procéder pour personnaliser le flux de Zébulon.
<script type=”text/javascript”>//MAIN FUNCTION: rssdisplaybox()var cssdrivebox=new rssdisplaybox(“zebulon”)cssdrivebox.set_items_shown(10,5) cssdrivebox.set_template(“default”) cssdrivebox.start() //Required: start script</script>
A la ligne 3, nous spécifions quel flux doit être pris en compte à l’aide de son identifiant (“zébulon”). Les valeurs 10 et 5 à la ligne suivante signifient que l’on télécharge les 10 derniers titres d’actualité à défaut de 5 par page. Logiquement, nous avons obtenons un effet de pagination avec 2 pages.
d) Enfin, pour une personnalisation plus poussée, rendez-vous dans le dossier rssbox et ouvrez le fichier outputbody ; vous y retrouverez les différents identifiants à utiliser dans votre feuille de style : rsscontainer, rsstitle, rssdate et rssdescription.
J’aimerai savoir (l’exemple 3b) comment faire en sorte que les éléments qui ont pour class "exeception" ne puissent pas posséder l’effet du drag and drop ?
En effet si dans notre div, on a un champ input (par exemple) eh bien on ne peut pas remplir ce champs.
Sinon c’est un très bon tuto 😛
Tous simplement, comment faire une fonction qui mettent fin à "Drag.init" ?
je vais faire un onclick="stop_Drag();"
Mais comment faire ?
Je n’ai pu faire fonctionner cette application qu’en remplaçant 200 par 0 (au niveau du test sur xhr2.status)
Ensuite, impeccable.
(Je parle de l’exemple 2c)
C’est super mais ça ne fait pas un vrai iframe.
Je dois avoir un index avec un autre fichier en iframe ou include qui lui seul se charge quand je clique sur un élément du conteneur.