PHP och AJAX RSS-läsare

RSS-läsare används för att läsa RSS Feed.

RSS tillåter snabb genomgång av nyheter och uppdateringar.

AJAX RSS-läsare

I detta AJAX-exempel kommer vi att visa en RSS-läsare, där innehåll från RSS laddas in i webbsidan utan att uppdatera sidan.

Välj en RSS-nyhetsprenumeration från listrutan nedan

Välj en RSS Feed:

Här listas RSS Feed.

Detta exempel inkluderar tre element:

  • En enkel HTML-formulär
  • JavaScript
  • PHP-sida

HTML-formulär

Detta är en HTML-sida. Den innehåller en enkel HTML-formulär och en länk till ett JavaScript-fil:

<html>
<head>
<script type="text/javascript" src="getrss.js"></script>
</head>
<body>
<form> 
Välj en RSS Feed:
<select onchange="showRSS(this.value)">
<option value="Google">Google Nyheter</option>
<option value="MSNBC">MSNBC Nyheter</option>
</select>
</form>
<p><div id="rssOutput">
<b>Försörj RSS Feed här.</b></div></p>
</body>
</html>

Exempel på förklaring - HTML-formulär

Som du ser innehåller den övre HTML-sidan ett enkelt HTML-formulär med en rullgardin.

Hur formuläret fungerar:

  1. När användaren väljer ett alternativ från en rullgardin, triggas ett händelse
  2. När ett händelse triggas, körs showRSS()-funktionen

Under formuläret finns en <div> med namnet "rssOutput" som används som placeholder för data som returneras av showRSS()-funktionen.

JavaScript

JavaScript-kod lagras i "getrss.js" och är kopplad till HTML-dokumentet:

var xmlHttp
function showRSS(str)
 { 
 xmlHttp=GetXmlHttpObject()
 if (xmlHttp==null)
  {
  alert ("Webbläsaren stöder inte HTTP-förfrågan")
  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;
}

Exempel förklaring:

stateChanged() och GetXmlHttpObject-funktionen och PHP och AJAX-forespåran Exempeln i denna sektion är desamma.

showRSS() funktionen

När en val görs i rullgardinsmenyn utförs denna funktion:

  1. Definiera url:en (filnamn) som skickas till servern
  2. Lägg till parametern (q) till url:en, parameterns innehåll är valen från rullgardinsmenyn
  3. Lägg till ett slumpmässigt nummer för att förhindra att servern cachar filen
  4. Anropa GetXmlHttpObject-funktionen för att skapa en XMLHTTP-objekt och informera objektet att utföra stateChanged-funktionen när ett ändringsögonblick inträffar
  5. Öppna XMLHTTP via en given url
  6. Skicka HTTP-forespåran till servern

PHP-sida

Sidan som anropar JavaScript-koden är PHP-filen med namnet "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>");
 }
?>

Exempel förklaring:

När ett alternativ skickas från JavaScript händer följande:

  1. PHP hitta vilket RSS-feed som är valt
  2. Skapa ett XML DOM-objekt för valt RSS-feed
  3. Hitta och skriv ut element från RSS-kanalen
  4. Genomgå de tre första RSS-projekten och skriv ut elementen