AJAX RSS Reader Step by Step Tutorial

Written by on November 21, 2005 in AJAX Experience, AJAX Tutorials - 45 Comments

I received many emails requesting more AJAX workshops, and as I promised before, this is another tutorial 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 :

AJAX RSS Tutorial requesting data

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

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.

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

45 Comments on "AJAX RSS Reader Step by Step Tutorial"

  1. zbiju November 23, 2005 at 12:06 pm · Reply

    Hi there
    URL in “conclusion” sections goes to “phpmagazine.net”, there is no “www” and error occurs:
    Error: uncaught exception: Permission denied to call method XMLHttpRequest.open
    When I add “www” on front of the URL we are getting another error:
    Error: RSSRequestObject.responseXML has no properties
    Source File: http://www.phpmagazine.net/ajaxrss/
    Line: 34
    I’m using Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.8) Gecko/20051111 Firefox/1.5

  2. Hatem November 23, 2005 at 2:54 pm · Reply

    The script should work fine with Firefox, We’re just experiencing few problems with our server and moving to a more powerful one. Hope we finish moving tomorrow, until then images and rss have been disabled. I’m sorry for the inconvenience.

  3. Hatem November 23, 2005 at 2:56 pm · Reply

    Please try to download a copy of the script and replace the backend url with another one on your server.

  4. Stephen November 24, 2005 at 9:00 am · Reply

    I don’t understand. Why would I want an RSS feed of data from my own server? Surely the point of “syndication” is to view data from someone else’s (remote) server?

  5. Hatem November 24, 2005 at 2:56 pm · Reply

    Stephen having control on all the application is very important, for example to track which service have been more requested … And thats who all feed websites works, they give access to cached data on their server (service like feedster, bloglines …).

  6. Mark November 29, 2005 at 6:54 pm · Reply

    This seems to be an issue with script signing. I tried to download the script, put it on one of our servers and run it and received the “permission denied” error in IE and the equivalent in Firefox.
    It seems to be an issue with the XP SP2. I’ve been trying to find information about script signing but am not having much luck. Suggestions?

  7. Hatem November 30, 2005 at 4:13 am · Reply

    Mark, check the new post about how to make XmlHttpRequest calls to another server in your domain, it might answer your question.

  8. Robert Durgin December 2, 2005 at 9:20 pm · Reply

    It has to do with JavaScript security policy, when using Firefox, your Javascript must be “digitally signed” to be able to get data from an external server. Here’s a thread that might be of some help: http://www.forum4designers.com/archive22-2003-12-25416.html

  9. Matt Pat December 18, 2005 at 4:36 am · Reply

    To get around that problem, I created a “virtual mirror” of the RSS feed I wanted to display, and hosted it locally on my website. The PHP file:
    <?php   header(‘Content-type: text/xml;’);   echo file_get_contents(“http://path.to/feed”);?>
    Then I just referenced the local file through the AJAX script. Since it’s on the same server, there are no security issues.

  10. Chern Jie February 24, 2006 at 7:43 am · Reply

    I can’t seem to get which part of the script I edited are wrong. It works on IE but not on Firefox. It’s under the same domain name of the blog (it’s atom). I appreciate any help.

  11. Albert March 30, 2006 at 3:43 pm · Reply

    Hi
    I just uploaded the script to my server for testing but I don’t see any data from any feed, just the ‘Requesting data…’ message at the defined interval. I have tried several feed URLs. Is there anything that must be configured in the server?
    Thanks

  12. Hatem March 31, 2006 at 7:05 pm · Reply

    Albert : Yes the feed url should be on your domain, see Matt comment if you want to test external feeds.

  13. Sean April 6, 2006 at 10:56 pm · Reply

    Hi Guys -
    The code is very cool, but the RSS feed seems to use “” elements rather than the sought after ” element.
    Any reason why? Do you have a version that is smart enough to sense the difference in feeds?

  14. AJAX RSS Reader April 13, 2006 at 6:03 am · Reply

    Here is a more advanced PHP AJAX RSS Feed Reader which display RSS Feeds in draggable auto-arranging AJAX Feed Windows which self-updates as RSS Feed is updated.

  15. Adam April 14, 2006 at 3:34 am · Reply

    Hey,
    Is there anyway I can place a limit to the amount of post there is on a feed. That i do not control. I am using Matt php script to get external content.

  16. premkumar May 17, 2006 at 9:19 am · Reply

    i alredy developed xml file for rss
    but i dont know to make it readable by rss reader

  17. tsmith May 19, 2006 at 8:08 pm · Reply

    I cannot make this script work. I have a good calendar at http://www.google.com/calendar/feeds/qlo2p51nu2g6l2lggklp6r3l90@group.calendar.google.com/public/basic
    that I want to be able to share with the cast in the show over a website. (Something that displays in monthly calendar form would be great). This script always hangs on “Requesting Data” and MSIE says there’s an “error on this page” but it is not specific as to what.
    Any ideas? Thanks a ton,
    TSmith

  18. Hatem May 21, 2006 at 10:11 am · Reply

    @tsmith you may check the post how to integrate google calendar in your website using AJAX.

  19. Jaap May 25, 2006 at 9:28 pm · Reply

    I’ve got it working in firefox, but IE gives me an error (method not supported for this object) at the lines below.
    var itemTitle = items[n].getElementsByTagName(‘title’).item(0).firstChild.data;
    var itemLink = items[n].getElementsByTagName(‘link’).item(0).firstChild.data;
    var itemDescr = items[n].getElementsByTagName(‘description’).item(0).firstChild.data;
    Anyone got a clue why?
    Thanks

  20. anks June 15, 2006 at 3:14 am · Reply

    i dont know if this is correct or not…but i was able to make cross domain calls without much hassle….but as long as it works i am good…
    i retrived the response as string and then converted it to xml to read it…
    heres the code…this function will be called by putting this onclick=”makeRequest(‘http://rss.cnn.com/rss/cnn_topstories.rss’)”
    and pl. put these in ur script tags
    var http_request = false;
    var xmldoc;
    function makeRequest(url) {
    if (window.XMLHttpRequest)
    { // for mozilla and firefox
    try
    { netscape.security.PrivilegeManager.enablePrivilege(“UniversalBrowserRead”);
    } catch (e)
    { alert(“Permission UniversalBrowserRead denied.”);
    }
    http_request = false;
    http_request = new XMLHttpRequest();
    if (http_request.overrideMimeType)
    { http_request.overrideMimeType(‘text/xml’);
    }
    }else if (window.ActiveXObject)
    { //for ie
    try
    { http_request = new ActiveXObject(“Msxml2.XMLHTTP”);
    }catch (e)
    { try
    { http_request = new ActiveXObject(“Microsoft.XMLHTTP”);
    } catch (e)
    { }
    }
    }
    if (!http_request)
    {
    alert(‘Giving up :( Cannot create an XMLHTTP instance’);
    return false;
    }
    http_request.onreadystatechange = alertContents;
    http_request.open(‘GET’, url, true);
    http_request.send(null);
    }
    function alertContents()
    { if (http_request.readyState == 4)
    { if (http_request.status == 200)
    { var string = http_request.responseText;
    var xmldoc;
    if (window.XMLHttpRequest)
    { var parser = new DOMParser();
    var doc = parser.parseFromString(string, “text/xml”);
    xmldoc = doc.documentElement;
    }else if (window.ActiveXObject)
    { xmldoc = http_request.responseXML;
    }
    var title = xmldoc.getElementsByTagName(“title”)[0].firstChild.nodeValue;
    var desc = xmldoc.getElementsByTagName(“description”)[0].firstChild.nodeValue;
    alert(‘title ‘+title);alert(‘description ‘+desc);
    } else
    { alert(‘There was a problem with the request.’);
    }
    }
    }

  21. David Hall July 4, 2006 at 7:31 am · Reply

    Any idea how I could make this work with more than one feed?

  22. ted August 25, 2006 at 7:15 pm · Reply

    great code. I tweaked it to add more feeds. here’s how:
    ———————–
    //CHANGED:added to pull all tags named channel
    var channels = node.getElementsByTagName(‘channel’);
    //CHANGED:sets content
    content = “”;
    //CHANGED:loop through channels
    for (var f=0; f ‘+channelTitle+’‘;
    // Browse items
    //CHANGED: changed to channels and item#
    var items = channels[f].getElementsByTagName(‘item’);
    //no change here on out. except close loop.
    for (var n=0; n ['+items[n].getElementsByTagName(‘pubDate’).item(0).firstChild.data+’] ‘;
    }
    catch (e)
    {
    var itemPubDate = ”;
    }
    content += ”+itemPubDate+’‘+itemTitle+’‘;
    }
    content += ”;
    }
    // Display the result
    //the innerhtml stuff goes after looping.
    ———————–

  23. 김기석 November 11, 2006 at 7:19 pm · Reply

    thanks!

  24. Tom December 5, 2006 at 1:59 am · Reply

    Thanks a lot for your RSS Reader!

  25. Ananth December 20, 2006 at 1:27 pm · Reply

    This code doesn’t work in other browsers. IE ok.

  26. superdavid January 12, 2007 at 6:34 pm · Reply

    what a great example on the ajax RSS publishing

  27. Sreekanth July 9, 2007 at 11:17 am · Reply

    I have tried this in IE 7.But I get the follwing error
    “Access denied” on this line “xmlHttp.open(“GET”,Backend,true);”
    Could anyone help me on this???

  28. esvl August 1, 2007 at 10:14 am · Reply

    I have no idea where to paste this!!
    hehe.

  29. james alex October 28, 2007 at 9:28 pm · Reply

    I just came across your Ajax Feed tutorial. Does this script need an PHP Server or it can run an FTP or it’s own server?

  30. Alex December 14, 2007 at 12:12 pm · Reply

    Easy but usable!

  31. Anonymous February 8, 2008 at 3:33 pm · Reply

    Hi, I want to show rss feeds from Blogspot in my college website.
    What I have to do or change to this script works in my server to get external feeds?
    Flavio
    Brazil

  32. Anonymous February 8, 2008 at 3:33 pm · Reply

    Hi, I want to show rss feeds from Blogspot in my college website.
    What I have to do or change to this script works in my server to get external feeds?
    Flavio
    Brazil

  33. Anonymous February 8, 2008 at 3:35 pm · Reply

    Hi, I want to show rss feeds from Blogspot in my college website.
    What I have to do or change to this script works in my server to get external feeds?
    Flavio
    Brazil

  34. Anonymous February 8, 2008 at 3:35 pm · Reply

    Hi, I want to show rss feeds from Blogspot in my college website.
    What I have to do or change to this script works in my server to get external feeds?
    Flavio
    Brazil

  35. Natasha May 24, 2008 at 4:38 pm · Reply

    Nice topic
    Thanks
    I have found two interesting sources ( http://fileshunt.com and http://filesfinds.com ) and would like to give the benefit of my experience to you.

  36. Filipe July 25, 2008 at 5:21 am · Reply

    To pick up the description, put
    var itemDesc = items[n].getElementsByTagName(“description”)[0].text;

  37. ilango August 8, 2008 at 4:19 pm · Reply

    I created web service using Rest.It works fine in a single machine.but access from different machine XMLHttpRequest.open(“GET”,”https://192.168.1.2/”,”true”) leave a exception “Access to restricted URI denied” security error.How to overcome it.please give the solution.

  38. carlos October 12, 2008 at 7:40 pm · Reply

    great useful script, i was wondering if you could tell me how to put more than just 1 rss feed in it so i can display from different sources in the same page and how to limit the number of items. thanks

  39. SL1M R3AP3R December 15, 2008 at 11:27 pm · Reply

    I may being stupid with this, but i’m trying to use an external rss feed and tried using matt’s method, create php file.. refference fle… but still just get “requesting data” mesage what am i doing or not doinf. Bearing in mind i am a complete noob at this
    chers
    SL1M

  40. Adam August 11, 2009 at 11:38 pm · Reply

    Thanks for this script. It definitely helped me with a site I’ve been building.
    Someone asked in a comment how to limit the number of items in the feed to show. I did this for my code, to only show 5 items, so I thought I would share it, it’s pretty basic.
    Put this code where the ‘content’ variable is getting values:
    if (i == 4)
    {
    content += ‘Item: ‘+itemTitle+’, ‘+itemPubDate+’, ‘+itemDescription+’.’;
    }
    else {
    content += ”;
    }
    var i = i + 1;
    Make sure to put var i = 0; before and outside the “for” loop which browses the items.

  41. sgauge September 4, 2009 at 12:37 pm · Reply

    Thanks to anks, here is a version working with both Firefox (tested with 3.5) and IE (6.0). Replace the whole script and make a call to { makeRequest(Backend); } to load or refresh the feed. Enjoy !
    ——– SCRIPT ———-
    var http_request = false;
    var xmldoc;
    var Backend = ‘http://www.google.fr/news?hl=en&ned=en&q=ajax&ie=UTF-8&output=rss’; // Backend url
    window.setInterval(“update_timer()”, 1200000); // update the data every 20 mins
    function makeRequest(url) {
    if (window.XMLHttpRequest)
    { // for mozilla and firefox
    try
    { netscape.security.PrivilegeManager.enablePrivilege(“UniversalBrowserRead”);
    } catch (e)
    { alert(“Permission UniversalBrowserRead denied.”);
    }
    http_request = false;
    http_request = new XMLHttpRequest();
    if (http_request.overrideMimeType)
    { http_request.overrideMimeType(‘text/xml’);
    }
    }else if (window.ActiveXObject)
    { //for ie
    try
    { http_request = new ActiveXObject(“Msxml2.XMLHTTP”);
    }catch (e)
    { try
    { http_request = new ActiveXObject(“Microsoft.XMLHTTP”);
    } catch (e)
    { }
    }
    }
    if (!http_request)
    {
    alert(‘Giving up :( Cannot create an XMLHTTP instance’);
    return false;
    }
    //http_request.onreadystatechange = alertContents;
    http_request.onreadystatechange = ReqChange;
    http_request.open(‘GET’, url, true);
    http_request.send(null);
    }
    /*
    * onreadystatechange function
    */
    function ReqChange() {
    // If data received correctly
    if (http_request.readyState==4) {
    // if data is valid
    if (http_request.status == 200)
    {
    // Parsing RSS
    var string = http_request.responseText;
    var xmldoc;
    if (window.XMLHttpRequest)
    {
    var parser = new DOMParser();
    var doc = parser.parseFromString(string, “text/xml”);
    xmldoc = doc.documentElement;
    }
    else if (window.ActiveXObject)
    xmldoc = http_request.responseXML;
    // Get Channel information
    var channel = xmldoc.getElementsByTagName(‘channel’).item(0);
    var title = channel.getElementsByTagName(‘title’).item(0).firstChild.data;
    var link = channel.getElementsByTagName(‘link’).item(0).firstChild.data;
    content = ‘‘+title+’‘;
    // Browse items
    var items = channel.getElementsByTagName(‘item’);
    for (var n=0; n ['+items[n].getElementsByTagName(‘pubDate’).item(0).firstChild.data+’] ‘;
    }
    catch (e)
    {
    var itemPubDate = ”;
    }
    content += ”+itemPubDate+’‘+itemTitle+’‘;
    }
    content += ”;
    // 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 = “Error requesting data.”;
    }
    HideShow(‘status’);
    }
    }
    /*
    * Timer
    */
    function update_timer() {
    RSSRequest();
    }
    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);
    }
    ——– /SCRIPT ———-

  42. singh March 5, 2010 at 10:24 pm · Reply

    what do u mean by feed url should be on your domain?

  43. Dış Cephe May 2, 2010 at 12:07 am · Reply

    I agree Adam.Thanks.

  44. Dave Bloggs June 1, 2010 at 6:15 pm · Reply

    The demo does not work on my PC.

Leave a Comment