Tuesday, September 2, 2008

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

  

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

 var
Backend = 'rss.php'; // Backend url .....
Read complete article
You can find the AJAX RSS Reader
script running online

No comments: