PHP and AJAX RSS Reader

Een RSS-lezer wordt gebruikt om RSS-feeds te lezen.

RSS staat voor snelle doorloop van nieuws en updates.

AJAX RSS-lezer

In onderstaand AJAX-voorbeeld demonstreren we een RSS-lezer, waarbij de inhoud van RSS zonder opnieuw te laden in de webpagina wordt ingeladen.

Selecteer een RSS-nieuwsabonnement uit de onderstaande lijst

Selecteer een RSS-feed:

Hier worden RSS-feeds vermeld.

Dit voorbeeld omvat drie elementen:

  • Eenvoudig HTML-formulier
  • JavaScript
  • PHP-pagina

HTML-formulier

Dit is een HTML-pagina. Het bevat een eenvoudige HTML-formulier en een koppeling naar een JavaScript-bestand:

<html>
<head>
<script type="text/javascript" src="getrss.js"></script>
</head>
<body>
<form> 
Selecteer een RSS-feed:
<select onchange="showRSS(this.value)">
<option value="Google">Google Nieuws</option>
<option value="MSNBC">MSNBC Nieuws</option>
</select>
</form>
<p><div id="rssOutput">
<b>RSS Feed zal hier worden vermeld.</b></div></p>
</body>
</html>

Voorbeeld uitleg - HTML formulier

Zoals u kunt zien, bevat de bovenstaande HTML-pagina een eenvoudig HTML-formulier met een keuzelijst.

Hoe het formulier werkt:

  1. Een gebeurtenis wordt geactiveerd wanneer de gebruiker een optie selecteert uit de keuzelijst
  2. Wanneer een gebeurtenis wordt geactiveerd, wordt de showRSS() functie uitgevoerd

Onder het formulier bevindt zich een <div> genaamd "rssOutput". Het wordt gebruikt als placeholder voor de gegevens die door de showRSS() functie worden geretourneerd.

JavaScript

JavaScript-code wordt opgeslagen in "getrss.js" en is verbonden met het HTML-document:

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;
}

Voorbeeldverklaring:

stateChanged() en GetXmlHttpObject functies met PHP and AJAX Requests De voorbeelden in dit hoofdstuk zijn hetzelfde.

showRSS() functie

Elke keer dat er een keuze wordt gemaakt in de keuzelijst, voert deze functie uit:

  1. Definieer de url (bestandsnaam) die naar de server wordt gestuurd
  2. Voeg de parameter (q) toe aan de url, de inhoud van de parameter is de geselecteerde optie in de keuzelijst
  3. Voeg een willekeurig getal toe om te voorkomen dat de serverbestanden worden gecached
  4. Roep de functie GetXmlHttpObject aan om een XMLHTTP-object te maken en geef het object opdracht om de functie stateChanged uit te voeren wanneer er een verandering optreedt
  5. Open XMLHTTP via de gegeven url
  6. Stuur een HTTP-verzoek naar de server

PHP-pagina

De serverpagina die JavaScript-code aanroept is een PHP-bestand genaamd "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>");
 }
?>

Voorbeeldverklaring:

Wanneer een optie wordt verzonden via JavaScript, gebeurt er het volgende:

  1. PHP bepaalt welke RSS-feed geselecteerd is
  2. Maak een XML DOM-object voor de geselecteerde RSS-feed
  3. Vind en voer de elementen uit van de RSS-kanalen
  4. Blaat de elementen in de eerste drie RSS-projecten na en voer deze uit