Lecteur RSS AJAX
Dans l'exemple AJAX suivant, nous allons démontrer un lecteur RSS à travers lequel le contenu RSS ne charge pas la page Web pendant l'actualisation .
Il contient un formulaire HTML simple et un lien pour exécuter un fichier 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>
Exemple d'explication - Formulaire HTML
Comme vous pouvez le voir, la page HTML ci-dessus contient un simple formulaire HTML avec une zone de liste déroulante. Le formulaire fonctionne comme ceci :
1. Lorsque l'utilisateur sélectionne une option dans la liste déroulante, un événement sera déclenché
2. déclenché, exécutez la fonction showRSS( )
Sous le formulaire se trouve un <div> nommé "rssOutput". Il est utilisé comme espace réservé pour les données renvoyées par la fonction showRSS().
JavaScript
Le code JavaScript est stocké dans "getrss.js", qui est connecté au document HTML :
var xmlHttp
function showRSS(str)
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
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;
}Explication :
Les fonctions stateChanged() et GetXmlHttpObject sont les mêmes que les exemples de la section Requêtes PHP et AJAX. Fonction showRSS()
Cette fonction sera exécutée chaque fois qu'une sélection est sélectionnée dans la liste déroulante :
1 Définir l'url (nom du fichier) envoyé à. le serveur
2. Ajoutez le paramètre (q) à l'url, le contenu du paramètre est l'option sélectionnée dans la liste déroulante
3. Ajoutez un nombre aléatoire pour empêcher le serveur de. mise en cache du fichier
4. Appelez la fonction GetXmlHttpObject pour créer un objet XMLHTTP et dites à l'objet d'exécuter la fonction stateChanged lorsqu'un changement est déclenché
5. Ouvrir XMLHTTP via l'url donnée<. 🎜>
6. Mettez la requête HTTP lancée sur le serveur
Page PHP
La page du serveur qui appelle le code JavaScript est un 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 d'exemple :
Lorsqu'une option est envoyée depuis JavaScript, que se passe-t-il :
1. PHP découvre quel RSS le flux est sélectionné
2. Le flux RSS crée un objet XML DOM
3. Recherchez et affichez les éléments du canal RSS
4. Éléments RSS et affichez-les
section suivante