RSS and AJAX: A Simple News Reader
by Paul Sobocinski
|
Pages: 1, 2, 3, 4, 5
Parsing the XML: The processRSS() Function and the RSS2Channel Object
The processRSS() function is shown below:
function processRSS(rssxml)
{
RSS = new RSS2Channel(rssxml);
showRSS(RSS);
}
This function simply calls the constructor of the RSS2Channel object and passes rssxml. This argument is of special significance, as it contains all of the RSS information. Moreover, JavaScript is able to recognize this as an XML object, and therefore we are able to use JavaScript's built-in DOM (Document Object Model) functions and properties on it. We can do this because we used the responseXML attribute of the XHR object to get the server response. If we had used responseText, parsing the XML would be much more difficult.
Now we'll examine the RSS2Channel object. Each RSS XML file always has exactly one channel element--this element contains all of the RSS data. As you would expect, this data is organized into a number of sub-elements, or "child" elements. Therefore, channel is the root element of an RSS XML file, which is represented by the RSS2Channel object. This object is shown below:
function RSS2Channel(rssxml)
{
/*A*/
/*required string properties*/
this.title;
this.link;
this.description;
/*optional string properties*/
this.language;
this.copyright;
this.managingEditor;
this.webMaster;
this.pubDate;
this.lastBuildDate;
this.generator;
this.docs;
this.ttl;
this.rating;
/*optional object properties*/
this.category;
this.image;
/*array of RSS2Item objects*/
this.items = new Array();
/*B*/
var chanElement = rssxml.getElementsByTagName("channel")[0];
var itemElements = rssxml.getElementsByTagName("item");
/*C*/
for (var i=0; i<itemElements.length; i++)
{
Item = new RSS2Item(itemElements[i]);
this.items.push(Item);
}
/*D*/
var properties = new Array("title", "link", "description", "language", "copyright", "managingEditor", "webMaster", "pubDate", "lastBuildDate", "generator", "docs", "ttl", "rating");
var tmpElement = null;
for (var i=0; i<properties.length; i++)
{
tmpElement = chanElement.getElementsByTagName(properties[i])[0];
if (tmpElement!= null)
eval("this."+properties[i]+"=tmpElement.childNodes[0].nodeValue");
}
/*E*/
this.category = new RSS2Category(chanElement.getElementsByTagName("category")[0]);
this.image = new RSS2Image(chanElement.getElementsByTagName("image")[0]);
}
As before, we will break the code into smaller pieces and explain each one individually.
A: As a guide, we list out all of the properties that we will be assigning values to. Each of these properties corresponds to an RSS XML element. For example, we will set this.language equal to the string found inside the <language>en-us</language> XML tag--in this case, en-us. Some of these properties will be custom objects, just as RSS2Channel. This will be explained in more detail shortly.
B: Here, we create two variables--one to store the contents of the channel element, and another to store an array of item elements. To accomplish this, we use the getElementsByTagName() function, which returns an array of all the elements in the XML file that match a specified tag name. As previously discussed, an RSS XML file only has one channel tag, so we expect an array with one element to be returned. We add [0] to the end of the function call to get the object and assign it to chanElement. On the other hand, we need itemElements to be an array, because an RSS XML file will have multiple <item> tags.
C: This loop traverses the itemElements array and parses each item element individually. An <item> tag in an RSS XML file contains a number of child tags, so we need to construct an RSS2Item object that will store this data in a meaningful way. We pass the current item element to the constructor, and assign the constructed object to Item. This is then added to the this.items array. Once this loop is complete, the items property of the RSS2Channel object will contain an array of custom RSS2Item objects. We will talk about the RSS2Item object once we're done with RSS2Channel.
