AJAX RSS Reader Step by Step Tutorial
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
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 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
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...
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.');
}
}
}
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
{
var channelTitle = channels[f].getElementsByTagName('title').item(0).firstChild.data;
var channelLink = channels[f].getElementsByTagName('link').item(0).firstChild.data;
//CHANGED:adds content to content, so all channels show
content = content + ''+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
{
var itemTitle = items[n].getElementsByTagName('title').item(0).firstChild.data;
var itemLink = items[n].getElementsByTagName('link').item(0).firstChild.data;
try
{
var itemPubDate = '['+items[n].getElementsByTagName('pubDate').item(0).firstChild.data+'] ';
}
catch (e)
{
var itemPubDate = '';
}
content += '
}
content += '';
}
// Display the result
//the innerhtml stuff goes after looping.
-----------------------
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 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?
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
- dhtmlxScheduler, a Powerful Ajax Event Calendar - Jun 02, 2009
- Visual WebGui Releases the First Coding Free Point and Click Web Design Tool - Jun 02, 2009
- jsDraw2D Javascript Graphics Library - Apr 21, 2009
- DHTMLX Released Version 2.1 - Mar 17, 2009


Subscribe to AJAX Magazine's feed