AJAX RSS Reader
In the following AJAX example, we will demonstrate an RSS reader through which the content from RSS is not processed. Load the web page while refreshing.
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 HTML page above contains a simple HTML form with a drop-down list box. The form works like this:
1. When the user selects an option in the drop-down box, an event will be triggered
2. When the event is triggered, execute showRSS( ) Function
Below the form is a <div> named "rssOutput". It is used as a placeholder for the data returned by the showRSS() function.
JavaScript
The JavaScript code is stored in "getrss.js", which is connected 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() and GetXmlHttpObject functions are the same as the examples in the PHP and AJAX Requests section. showRSS() function
This function will be executed whenever a selection is selected in the drop-down box:
1. Define the url (file name) sent to the server
2. Add the parameter (q) to the url, the parameter content is the selected option in the drop-down 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 tell the object to execute the stateChanged function when a change is triggered
5. Open XMLHTTP through the given url
6. Put the HTTP request Launched to the server
PHP page
The server page that calls the 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, what happens: 1. PHP finds out which RSS feed is selected
2. Create an XML DOM object for an RSS feed
3. Find and output the elements from the RSS channel
4. Traverse the elements in the first three RSS items and output them
Next Section
