AJAX Introduction

AJAX RSS Reader Step by Step Tutorial

Tutorial whith Demo about writing an AJAX RSS Reader. This AJAX reader is written in Javascript only, it just request a backend url on the same server then display the feed resulted as you can see in the screenshots below :

Preparing the XMLHttpRequest Object
In the first step the application prepared an XMLHttpRequest object to use it for loading remote RSS data. I tested the code with firefox only, but I added ActiveXObject in case IE was used.

   var RSSRequestObject = false; // XMLHttpRequest Object

if (window.XMLHttpRequest) // try to create XMLHttpRequest
	RSSRequestObject = new XMLHttpRequest();

if (window.ActiveXObject)	// if ActiveXObject use the Microsoft.XMLHTTP
	RSSRequestObject = new ActiveXObject("Microsoft.XMLHTTP");

Writing the HTML code
Just few lines are enough, two divs are used by the application the status will inform about the progress of requesting data, and the ajaxreader will be the container in which the result will be displayed. The first thing then to do onload page is to run the AJAX Reader.

   <body
onload="RSSRequest();">
<h2><acronym title="Asynchronous Javascript And
XML">AJAX</acronym> <acronym title="Rich Site
Summary">RSS</acronym> Reader</h2>
<div id="status" style="none"></div>
<div id="ajaxreader"></div>
</body>

The AJAX RSS Reader

The AJAX Reader will request the backend URL and run a function ReqChange() when the data will be loaded. I have just added few additional function for usability purpose to display the status and hide it ...

	var
Backend = 'rss.php'; // Backend url
//Prevent IE caching!!!!!!!!!!!!!!!!!!!
rnd = Math.random().toString().substring(2);
Backend = Backend.indexOf('?')>-1 ? Backend+'&rnd='+rnd : Backend+'?rnd='+rnd;
/*
* Main <acronym title="Asynchronous Javascript And
XML">AJAX</acronym> <acronym title="Rich Site
Summary">RSS</acronym> reader request
*/
function RSSRequest() { // change the status to requesting data
HideShow('status'); 
document.getElementById("status").innerHTML ="Requesting data ..."; // Prepare the request
	if(RSSRequestObject.overrideMimeType) {
           RSSRequestObject.overrideMimeType('text/xml');
       }
RSSRequestObject.open("GET", Backend , true); // Set the
onreadystatechange function RSSRequestObject.onreadystatechange =
ReqChange; // Send RSSRequestObject.send(null); }
function HideShow(id){ var el = GetObject(id);
if(el.style.display=="none") el.style.display=''; else
el.style.display='none';
}
function GetObject(id){ var el = document.getElementById(id);
return(el);
}

Now we just inform the reader that we started requesting data by changing the status message then open the Backend URL which we choose as a single feed in our case.

Process the data and display result
Finally we have just to finish by processing the data and display the result. If the data are received correctly, we have to parse the RSS data to retrive the channel information such title, url, description ... then browse different items to display the final result

* onreadystatechange function
*/
function ReqChange() {

	// If data received correctly
	if (RSSRequestObject.readyState==4) {
	
		// if data is valid
		if (RSSRequestObject.responseText.indexOf('invalid') == -1) 
		{ 	
			// Parsing <acronym title="Rich Site Summary">RSS</acronym>
			var node = RSSRequestObject.responseXML.documentElement; 
		
			if (window.ActiveXObject)
			{
			              xmlDocument = new ActiveXObject('Microsoft.XMLDOM');
					      xmlDocument.async = false;  
					      var loaded = xmlDocument.loadXML(RSSRequestObject.responseText);	
					    var node = xmlDocument; 
			}
			
			// Get Channel information
			var channel = node.getElementsByTagName('channel').item(0);
			var title = channel.getElementsByTagName('title').item(0).firstChild.data;
			var link = channel.getElementsByTagName('link').item(0).firstChild.data;
			
			content = '<div class="channeltitle"><a href="'+link+'">'+title+'</a></div><ul>';
		
			// Browse items
			var items = channel.getElementsByTagName('item');
			for (var n=0; n <items var var try var>['+items[n].getElementsByTagName('pubDate').item(0).firstChild.data+'] ';
				} 
				catch (e) 
				{ 
					var itemPubDate = '';
				}
				
			
				content += '<li>'+itemPubDate+'</font><a href="'+itemLink+'">'+itemTitle+'</a></li>';
			}
			
			
			content += '</ul>';
			// Display the result
			document.getElementById("ajaxreader").innerHTML = content;

			// Tell the reader the everything is done
			document.getElementById("status").innerHTML = "Done.";
			
		}
		else {
			// Tell the reader that there was error requesting data
			document.getElementById("status").innerHTML = "<div class="error">Error requesting data.<div>";
		}
		
		HideShow('status');
	}
	
}

Update Feed
Now that we have finished this AJAX reader, I added a timer to update feeds every 20 minutes. The timer is just two lines independant from the previous code. I just put it in a separated function so I can play with it later and have more flexibility to add new features.


window.setInterval('update_timer()', 1200000); // update the data every 20 mins

/*
* Timer
*/
function update_timer() {
	RSSRequest();
}

Conclusion and Demo
You can find the AJAX RSS Reader script running online or download it here, tested with Firefox 1.0.7 only. This was a basic code that show how to create a simple AJAX RSS Reader, it could be extended to support more feeds for examples or to retrive stock quotes ... etc. You may copy the source and play freely with it, I'll be interested to know how you use it or how it could be extended.

↑ Grab this Headline Animator

Change Language

AJAX RSS Reader Step by Step Tutorial