PHP ja AJAX RSS lukija

RSS-lukija käytetään RSS-syötteiden lukemiseen.

RSS mahdollistaa nopean uutisten ja päivitysten selaamisen.

AJAX RSS-lukija

Alla olevassa AJAX-esimerkissä näytämme RSS-lukijan, joka luo RSS-sisällön verkkosivulle ilman sivun uudelleenlatausta.

Valitse alla olevasta luettelosta RSS-uutisjärjestelmä

Valitse RSS-syöte:

Tässä luetellaan RSS-syötteet.

Esimerkissä on kolme elementtiä:

  • Yksinkertainen HTML-lomake
  • JavaScript
  • PHP-sivu

HTML-lomake

Tämä on HTML-sivu. Se sisältää yksinkertaisen HTML-lomakkeen ja linkin suoritettavaan JavaScript-tiedostoon:

<html>
<head>
<script type="text/javascript" src="getrss.js"></script>
</head>
<body>
<form> 
Valitse RSS-syöte:
<select onchange="showRSS(this.value)">
<option value="Google">Google Uutiset</option>
<option value="MSNBC">MSNBC Uutiset</option>
</select>
</form>
<p><div id="rssOutput">
<b>RSS Syöte listataan täällä.</b></div></p>
</body>
</html>

Esimerkki selityksestä - HTML-lomake

Kuten näette, yllä oleva HTML-sivu sisältää yksinkertaisen HTML-lomakkeen, jossa on pudotusvalikko.

Lomake toimii seuraavasti:

  1. Kun käyttäjä valitsee pudotusvalikon vaihtoehdon, aktivoituu tapahtuma
  2. Kun tapahtuma aktivoituu, suoritetaan showRSS() -funktio

Lomakkeen alla on nimeltään "rssOutput" yksi <div>-elementti. Se toimii showRSS() -funktioon palautetun datan paikkana.

JavaScript

JavaScript-koodi tallennetaan "getrss.js"-tiedostoon, joka on yhdistetty HTML-dokumenttiin:

var xmlHttp
function showRSS(str)
 { 
 xmlHttp=GetXmlHttpObject()
 if (xmlHttp==null)
  {
  alert ("Selain ei tue HTTP-pyynnön lähettämistä")
  palauta
  }
 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");
  }
 }
palauta xmlHttp;
}

Esimerkki selityksestä:

stateChanged() ja GetXmlHttpObject-funktio ovat PHP ja AJAX pyynnöt Tämä luku on samanlainen kuin edellinen.

showRSS() -funktio

Tämä funktio suoritetaan aina, kun valitaan pudotusvalikosta:

  1. Määritä lähetettävän url:n (tiedostonimi)
  2. Lisää parametri (q) url:hen, parametrin sisältö on pudotusvalikon valittu vaihtoehto
  3. Lisää satunnainen luku estääksesi palvelimen välimuistinnan tiedostoa
  4. Kutsu GetXmlHttpObject-funktiota luodaksesi XMLHTTP-objektin ja kerro objektille, että se suorittaa stateChanged-funktion, kun tapahtuu muutos
  5. Avaa XMLHTTP antamalla annettu url
  6. Lähetä HTTP-pyyntö palvelimelle

PHP-sivu

Palvelin sivu, joka kutsuu JavaScript-koodia, on nimeltään "getrss.php" PHP-tiedosto:

<?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>");
 }
?>

Esimerkki selityksestä:

Kun valinta lähetetään JavaScriptissä, tapahtuu seuraava:

  1. PHP löytää, mikä RSS-syöte on valittu
  2. Luo valitulle RSS-syötteelle XML DOM-objekti
  3. Löydä ja tulosta RSS-sivun elementit
  4. Läpikäy kolmen ensimmäisen RSS-projektin elementit ja tulosta ne