PHP und AJAX-RSS-Reader

Ein RSS-Reader wird verwendet, um RSS-Feeds zu lesen.

RSS ermöglicht eine schnelle Durchsicht von Nachrichten und Updates.

AJAX RSS Reader

In diesem AJAX-Beispiel wird ein RSS-Reader gezeigt, durch den Inhalte aus RSS ohne Neuladen der Seite in die Webseite geladen werden.

Wählen Sie einen RSS-News-Abonnement aus der folgenden Liste

Wählen Sie einen RSS-Feed aus:

Hier werden RSS-Feeds aufgelistet.

Dieses Beispiel enthält drei Elemente:

  • Einfaches HTML-Formular
  • JavaScript
  • PHP-Seite

HTML-Formular

Dies ist eine HTML-Seite. Sie enthält einen einfachen HTML-Formular und einen Link zu einer JavaScript-Datei:

<html>
<head>
<script type="text/javascript" src="getrss.js"></script>
</head>
<body>
<form> 
Wählen Sie einen RSS-Feed aus:
<select onchange="showRSS(this.value)">
<option value="Google">Google Nachrichten</option>
<option value="MSNBC">MSNBC Nachrichten</option>
</select>
</form>
<p><div id="rssOutput">
<b>RSS Feed wird hier aufgelistet.</b></div></p>
</body>
</html>

Beispielklärung - HTML-Formular

Wie Sie sehen können, enthält die obere HTML-Seite ein einfaches HTML-Formular mit einer Dropdown-Liste.

Wie das Formular funktioniert:

  1. Wenn der Benutzer eine Option aus dem Dropdown-Menü auswählt, wird ein Ereignis ausgelöst
  2. Wenn ein Ereignis ausgelöst wird, wird die Funktion showRSS() ausgeführt

Unter dem Formular befindet sich ein <div> mit dem Namen "rssOutput". Es dient als Platzhalter für die von der Funktion showRSS() zurückgegebenen Daten.

JavaScript

JavaScript-Code wird im "getrss.js" gespeichert und mit dem HTML-Dokument verbunden:

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

Beispiel Erklärung:

stateChanged() und die Funktion GetXmlHttpObject mit PHP und AJAX-Anfragen Das Beispiel in diesem Abschnitt ist gleich.

showRSS() Funktion

Diese Funktion wird ausgeführt, wenn im Dropdown-Menü eine Auswahl getroffen wird:

  1. Definieren Sie die URL (Dateiname), die an den Server gesendet wird
  2. Fügen Sie den Parameter (q) zur URL hinzu, der den ausgewählten Wert des Dropdown-Elements enthält
  3. Fügen Sie eine Zufallszahl hinzu, um den Server-Cache zu verhindern
  4. Rufen Sie die Funktion GetXmlHttpObject auf, um ein XMLHTTP-Objekt zu erstellen und dem Objekt mitzuteilen, dass es die Funktion stateChanged ausführen soll, wenn es eine Änderung verursacht
  5. Öffnen Sie den XMLHTTP über die angegebene URL
  6. Senden Sie eine HTTP-Anfrage an den Server

PHP-Seite

Der Serverseite, die JavaScript-Code aufruft, ist die PHP-Datei "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>");
 }
?>

Beispiel Erklärung:

Es passiert, wenn eine Option von JavaScript gesendet wird:

  1. PHP findet heraus, welcher RSS-Feed ausgewählt wurde
  2. Erstellen Sie für den ausgewählten RSS-Feed ein XML DOM-Objekt
  3. Finden und geben Sie die Elemente aus RSS-Feeds heraus
  4. Durchsuchen Sie die ersten drei RSS-Projekte und geben Sie die Elemente aus