AJAX Magazine: AJAX RSS Reader Step by Step Tutorial : Mobile Edition

Published on 2005-11-21 01:39:05

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.

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.

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

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 RSS
			var node = RSSRequestObject.responseXML.documentElement; 
			
			
			// 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.

Any comments ?

Update 26/11/2005 : Demo URL updated.

Update 06/12/2006 : Article updated for a better readability..

Related Entries