Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Parsing the Response
Parsing the response is a bit more challenging because of the differences in RSS feeds. Some have images, which include a title and description node, and some don’t. Therefore, when we parse the feed we need to do a little checking to decipher whether it includes an image. If it does, I display the image in the image div tag, along with the title and link for the feed:
var _logo = "";
var _title = response.getElementsByTagName(’title’)[0].firstChild.data;
var _link = response.getElementsByTagName(’link’)[0].firstChild.data;;
_logo += "<a href=’" + _link + "’ target=’_blank’>" + _title + "</a><br/>";
if(checkForTag(response.getElementsByTagName(’image’)[0]))
{
var _url = response.getElementsByTagName(’url’)[0].firstChild.data;
_logo += "<img src=’" + _url + "’ border=’0’><br/>"
}
document.getElementById(’logo’).innerHTML = _logo;
Not only do we have to check for an image to display it, we also need to check when we’re looping through all of the items in the feed, because if there’s an image all the other title and link node indexes get thrown out of whack. Therefore, when the image tag is found, we adjust the index for the title and link nodes by incrementing the index by one with each pass:
if(checkForTag(response.getElementsByTagName(’image’)[0]) "" i>0)
{
var _title = response.getElementsByTagName(’title’)[i+1].firstChild.data;
var _link = response.getElementsByTagName(’link’)[i+1].firstChild.data;
}
else
{
var _title = response.getElementsByTagName(’title’)[i].firstChild.data;
var _link = response.getElementsByTagName(’link’)[i].firstChild.data;
}
You can use the checkForTag method to check whether specific tags exist:
function checkForTag(tag)
{
if(tag != undefined)
{
return true;
}
else
{
return false;
}
}
There are many possibilities for parsing a feed. For example, you can assign items to categories and make the categories collapsible so that users can choose what they want to see. As an example, I categorized items by date by deciphering whether the pubDate for a particular item was different from the previous item’s pubDate and displayed a new date accordingly:
if(i>1)
{
var previousPubDate = response.getElementsByTagName(’pubDate’)[i-1].firstChild.data;
}
if(pubDate != previousPubDate || previousPubDate == undefined)
{
_copy += "<div id=’detail’>" + pubDate + "</div><hr align=’left’ width=’90%’/>";
}
_copy += "<a href=\"javascript:showDetails(’" + i + "’);\">" + _title + "</a><br/><br/>";
document.getElementById(’copy’).innerHTML += _copy;
The last piece of functionality is the showDetails method, which is used to display details when a user selects a specific item from a feed. It takes one parameter, the item index, and uses it to find the index of the details node in the feed:
function showDetails(index)
{
document.getElementById(’details’).innerHTML = response.getElementsByTagName(’description’)[index].firstChild.data;
}
To view the entire JavaScript file, reference the source code for the project. This file also includes the methods that create the request object and handle loading, which I explain in detail in my article "How To Use AJAX."