PHP and AJAX RSS Reader

RSS readers are used to read RSS Feeds.

RSS allows for quick browsing of news and updates.

AJAX RSS Reader

In the following AJAX example, we will demonstrate an RSS reader that loads content from RSS into the web page without refreshing.

Select an RSS news subscription from the following list box

Please select an RSS-Feed:

RSS Feeds will be listed here.

This example includes three elements:

  • Simple HTML Form
  • JavaScript
  • PHP page

HTML Form

This is an HTML page. It contains a simple HTML form and a link to execute a JavaScript file:

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

Example Explanation - HTML Form

As you can see, the above HTML page contains a simple HTML form with a dropdown list box.

How the form works:

  1. An event is triggered when the user selects an option from the dropdown menu
  2. The showRSS() function is executed when an event is triggered

Below the form is a <div> named "rssOutput". It serves as a placeholder for the data returned by the showRSS() function.

JavaScript

The JavaScript code is stored in "getrss.js" and is linked to the HTML document:

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

Example Explanation:

The stateChanged() function and GetXmlHttpObject are related to PHP and AJAX Requests The examples in this section are the same.

showRSS() function

This function is executed every time a selection is made in the dropdown box:

  1. Define the url (filename) to be sent to the server
  2. Add the parameter (q) to the url, the content of the parameter is the option selected from the dropdown box
  3. Add a random number to prevent the server from caching the file
  4. Call the GetXmlHttpObject function to create an XMLHTTP object, and inform the object to execute the stateChanged function when a change is triggered
  5. Open XMLHTTP through the given url
  6. Send an HTTP request to the server

PHP page

The server page that calls JavaScript code is a PHP file named "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>");
 }
?>

Example Explanation:

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

  1. PHP to find 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