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 :
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"
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
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.
Please try to download a copy of the script and replace the backend url with another one on your server.
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?
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 …).
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?
Mark, check the new post about how to make XmlHttpRequest calls to another server in your domain, it might answer your question.
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
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.
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.
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
Albert : Yes the feed url should be on your domain, see Matt comment if you want to test external feeds.
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?
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.
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.
i alredy developed xml file for rss
but i dont know to make it readable by rss reader
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
@tsmith you may check the post how to integrate google calendar in your website using AJAX.
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
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…
Cannot create an XMLHTTP instance’);
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
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.’);
}
}
}
Any idea how I could make this work with more than one feed?
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.
———————–
thanks!
Thanks a lot for your RSS Reader!
This code doesn’t work in other browsers. IE ok.
what a great example on the ajax RSS publishing
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???
I have no idea where to paste this!!
hehe.
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?
Easy but usable!
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
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
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
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
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.
To pick up the description, put
var itemDesc = items[n].getElementsByTagName(“description”)[0].text;
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.
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
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
thank you so much
http://www.infinitetiers.com/index.php?do=Ajax-RSS-Reader
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.
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 !
Cannot create an XMLHTTP instance’);
——– 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
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 ———-
what do u mean by feed url should be on your domain?
I agree Adam.Thanks.
The demo does not work on my PC.