An Ajax RSS parser
摘自：http://www.xml.com/pub/a/2006/09/13/rss-and-ajax-a-simple-news-reader.html
Ajax (Asynchronous JavaScript And XML) and RSS (Really SimpleSyndication) are two technologies that have taken the Web by storm.Most commonly, RSS is used to provide news to either people or otherorganizations. This is done by serving an "RSS feed" from a website. AnRSS feed is simply a link to an XML file that is structured in acertain way. The RSS specification tells us the expected structure ofthe XML file. For example, the title, author, and description tags arerequired, and so all RSS XML files will have at least these three tags.
The RSS specification that we will be using is 2.0, which is boththe NEWEST and most widely used of the three specifications (0.98, 1.0,and 2.0). fortunately, RSS 2.0 is far less complex than RSS 1.0, so youcan quickly familiarize yourself with RSS 2.0 here: blogs.law.harvard.edu/tech/rss. If you want a comprehensive introduction to RSS, covering all three specifications, go here: www.xml.com/pub/a/2002/12/18/dive-into-xml.html.
Why are we using Ajax to parse our RSS? By using Ajax, we arepassing over the work of processing the RSS XML file to the webbrowser, thus reducing server load. Also, Ajax allows the user to havea more seamless web experience, because we are able to fetch the entireRSS XML file from the server without having to refresh the page.Lastly, Ajax is designed to handle XML files, so it's able to parse RSSin a simple and elegant way.
For the purposes of this article, you don't need to be familiar withAjax; however, a basic understanding of JavaScript is stronglyrecommended.
Here's how the parser is going to work: first, the file name of theRSS feed is selected in an HTML form. Once the user Clicks Submit, the getRSS()function is called. This function is responsible for fetching thespecified RSS XML file from the server. Once it's fetched successfully,processRSS() converts the received XML file into a JavaScript object. Finally, showRSS(RSS)is called, which displays some of the information contained in the RSSJavaScript object to us by updating the HTML page. The diagram belowsummarizes these steps:
+"" "+"/>"; /*C2*/
}
/*D*/
document.getElementById("chan_items").innerHTML = "";
for (var i=0; i<RSS.items.length; i++)
{
item_html = startItemTag;
item_html += (RSS.items[i].title == null) ? "" : startTitle + RSS.items[i].title + endTag;
item_html += (RSS.items[i].link == null) ? "" : startLink + RSS.items[i].link + endTag;
item_html += (RSS.items[i].description == null) ? "" : startDescription + RSS.items[i].description + endTag;
item_html += endTag;
document.getElementById("chan_items").innerHTML += item_html; /*D1*/
}
return true;
}
A: As we have no way of knowing the number of channel items in theRSS feed, we must dynamically generate the HTML for the RSS items.These are the default values for the HTML tags that will contain the RSS2Item data. For compatibility, we also dynamically generate the img HTML tag.
B: We traverse the string properties in the RSS2Categoryobject here, similar to how we did in the constructor. In order toclear any data that may remain from an old RSS feed, we reset the innerHTML property on line B1. We are able to fetch the specific div element that we need from the HTML by calling getElementById(). Providing that the property is defined, we set the div element to its new value on line B2.
C: Again, we use the getElementById() function to getthe HTML element that will contain the image from the RSS feed. As theimage should be linkable, we use an anchor element (a) instead of a div element. The href attribute in the anchor element specifies what the image should link to, so we assign it to the value found in RSS.image.link (C1). The content of the element is filled in using the innerHTML property, as we have done in part B (C2).
D: Here is where we display the items in the RSS object. A divtag is defined for each RSS item, containing the title, link, anddescription. For the sake of clarity, the other properties have beenomitted. Each div tag is appended to the contents of the chan_items parent tag using the innerHTML property (D1).
Wrap-Up
The Ajax RSS parser has been tested in IE 6.0 and Firefox 1.5.0.6 for Windows XP. The RSS2Channel object does not support all of the elements in the RSS 2.0 specification. The ones that have been omitted are cloud, textInput, skipHours, and skipDays.For the most part, these RSS elements are only useful on the serverside, so it wouldn't make sense to include them in a client-side parser.
After noting the length of the code, you may be thinking that thesame functionality could have been accomplished with half the number oflines of code. In particular, we could have completely omitted the RSSobject by writing the showRSS(RSS) function in a way that reads the RSS properties directly from the XML element. certainly, this is possible. However, showRSS() is only meant to be an example of how the RSS2Channelobject can be used. By defining an RSS object that contains meaningfulRSS data, we have a much more scalable application. For example, thecode can be easily extended to fetch multiple feeds. The RSS objectsfrom these feeds can then be manipulated, or compared with other feeds(you can fetch a new feed after a certain interval, and compare it withthe old one). The point of a separate RSS object is to makeincreasingly complex applications like this easier to develop.
All of the files that were discussed are available below:
The HTML file: rssajax.html
The JavaScript file, containing the RSS parser: rssajax.js
Sample RSS file 1: test-rss.xml
Sample RSS file 2: google-rss.xml
