PHP og AJAX RSS Læser

RSS-læser bruges til at læse RSS Feed.

RSS tillader hurtig gennemgang af nyheder og opdateringer.

AJAX RSS-læser

I nedenstående AJAX-eksempel viser vi en RSS-læser, hvor indhold fra RSS indlæses i websiden uden at opdatere siden.

Vælg en RSS-news-abonnement i nedenstående liste

Vælg en RSS-Feed:

Her vises RSS Feed.

Dette eksempel inkluderer tre elementer:

  • En simpel HTML-formular
  • JavaScript
  • PHP-side

HTML-formular

Dette er en HTML-side. Den indeholder en simpel HTML-formular og et link til at udføre et JavaScript-program:

<html>
<head>
<script type="text/javascript" src="getrss.js"></script>
</head>
<body>
<form> 
Vælg en RSS-Feed:
<select onchange="showRSS(this.value)">
<option value="Google">Google Nyheder</option>
<option value="MSNBC">MSNBC Nyheder</option>
</select>
</form>
<p><div id="rssOutput">
<b>RSS Feed vil blive listet her.</b></div></p>
</body>
</html>

Eksempel på forklaring - HTML-formular

Som du kan se, indeholder den øverste HTML-side en simpel HTML-form med en dropdown-boks.

Sådan virker formularen:

  1. Når brugeren vælger en indstilling i en dropdown-boks, udløses der et event
  2. Når et event udløses, køres showRSS() funktionen

Under formularen er der en <div> med navnet "rssOutput" som bruges som en placeholder for data, der returneres af showRSS() funktionen.

JavaScript

JavaScript-kode gemmes i "getrss.js" og er forbundet med HTML-dokumentet:

var xmlHttp
function showRSS(str)
 { 
 xmlHttp=GetXmlHttpObject()
 if (xmlHttp==null)
  {
  alert ("Browseren understøtter ikke HTTP-anmodning")
  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;
}

Eksempel forklaring:

stateChanged() og GetXmlHttpObject-funktionen med PHP og AJAX Anmodning Eksemplet i dette afsnit er det samme.

showRSS() funktion

Dette funktion udføres hver gang der vælges et valg i dropdown-menuen:

  1. Definer den url (filnavn) der sendes til serveren
  2. Tilføj parameteren (q) til url'en, parameterindholdet er valget i dropdown-menuen
  3. Tilføj et tilfældigt tal for at forhindre serveren i at cache filen
  4. Kald GetXmlHttpObject-funktionen for at oprette en XMLHTTP-objekt og informer objektet om, at det skal udføre stateChanged-funktionen, når der opstår en ændring
  5. Åbn XMLHTTP gennem den givne url
  6. Send HTTP-anmodning til serveren

PHP-side

Server-siden side, der kalder JavaScript-koden, er en PHP-fil ved navn "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>");
 }
?>

Eksempel forklaring:

Når et valg sendes fra JavaScript, sker der:

  1. PHP finde hvilken RSS feed der er valgt
  2. Opret en XML DOM-objekt for valgte RSS feed
  3. Find og output elementer fra RSS-kanaler
  4. Gennemgå og output elementer fra de første tre RSS-projekter