Αναγνώστης RSS με AJAX και PHP

Ο αναγνώστης RSS χρησιμοποιείται για την ανάγνωση RSS Feed.

Το RSS επιτρέπει την ταχεία περιήγηση ειδήσεων και ενημερώσεων.

Αναγνώστης RSS AJAX

Στο παρακάτω παράδειγμα AJAX, θα δείξουμε έναν αναγνώστη RSS, μέσω του οποίου το περιεχόμενο από το RSS εισάγεται στην ιστοσελίδα χωρίς να γίνει ανανέωση.

Επιλέξτε ένα RSS ειδήσεων από τη παρακάτω λίστα

Επιλέξτε ένα RSS-Feed:

Ακολουθεί η λίστα με τα RSS Feed.

Αυτό το παράδειγμα περιλαμβάνει τρία στοιχεία:

  • Απλή φόρμα HTML
  • JavaScript
  • Σελίδα PHP

Φόρμα HTML

Αυτό είναι μια σελίδα HTML. Περιέχει έναν απλό φόρμα HTML και έναν σύνδεσμο για την εκτέλεση ενός αρχείου JavaScript:

<html>
<head>
<script type="text/javascript" src="getrss.js"></script>
</head>
<body>
<form> 
Select an RSS-Feed:
<select onchange="showRSS(this.value)">
<option value="Google">Google News</option>
<option value="MSNBC">MSNBC News</option>
</select>
</form>
<p><div id="rssOutput">
<b>RSS Feed will be listed here.</b></div></p>
</body>
</html>

Παράδειγμα εξήγησης - Φόρμα HTML

Όπως βλέπετε, η ανώτερη σελίδα HTML περιέχει έναν απλό φόρμα HTML με ένα μενού πτώσεως.

Η λειτουργία της φόρμας είναι η εξής:

  1. Όταν ο χρήστης επιλέγει μια επιλογή από το μενού πτώσεως, εκτυπώνεται ένα συμβάν
  2. Όταν εκτυπώνεται το συμβάν, εκτελείται η συνάρτηση showRSS()

Κάτω από τη φόρμα υπάρχει ένα <div> με το όνομα "rssOutput" που χρησιμοποιείται ως placeholder για τα δεδομένα που επιστρέφει η συνάρτηση showRSS().

JavaScript

Το κώδικας JavaScript αποθηκεύεται στο "getrss.js" και συνδέεται με το έγγραφο HTML:

var xmlHttp
function showRSS(str)
 { 
 xmlHttp=GetXmlHttpObject();
 if (xmlHttp==null)
  {
  alert ("Ο περιηγητής δεν υποστηρίζει αιτήματα HTTP")
  επιστρέφει;
  }
 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");
  }
 }
επιστρέφει το xmlHttp;
}

Example Explanation:

stateChanged() και η συνάρτηση GetXmlHttpObject με Αίτημα AJAX με PHP Οι παραδείξεις σε αυτή την ενότητα είναι οι ίδιες.

Συνάρτηση showRSS()

Η συνάρτηση εκτελείται κάθε φορά που επιλέγεται μια επιλογή από το αναπτυσσόμενο μενού:

  1. Ορίστε τη διεύθυνση URL (όνομα αρχείου) που θα αποσταλεί στον διακομιστή
  2. Προσθέστε τα παραμέτρων (q) στη διεύθυνση URL, το περιεχόμενο της παραμέτρου είναι η επιλογή από το αναπτυσσόμενο μενού
  3. Προσθέστε έναν τυχαίο αριθμό για να αποφύγετε τον αποθηκευτικό χώρο του διακομιστή
  4. Καλέστε τη συνάρτηση GetXmlHttpObject για να δημιουργήσετε το αντικείμενο XMLHTTP και να ενημερώσετε το αντικείμενο ότι πρέπει να εκτελεί τη συνάρτηση stateChanged όταν προκαλείται αλλαγή
  5. Ανοίξτε το XMLHTTP με τη διεύθυνση URL που δώσατε
  6. Αποστέλλετε HTTP αίτημα στον διακομιστή

Σελίδα PHP

Η σελίδα διακομιστή που καλείται JavaScript είναι το αρχείο "getrss.php" του 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>");
 }
?>

Example Explanation:

When an option is sent from JavaScript, the following occurs:

  1. PHP determines which RSS feed is selected
  2. Create an XML DOM object for the selected RSS feed
  3. Find and output elements from the RSS feed
  4. Traverse the elements of the first three RSS items and output them