XML.com: XML From the Inside Out
oreilly.comSafari Bookshelf.Conferences.

advertisement

RSS and AJAX: A Simple News Reader

September 13, 2006

An Ajax RSS Parser

Ajax (Asynchronous JavaScript And XML) and RSS (Really Simple Syndication) are two technologies that have taken the Web by storm. Most commonly, RSS is used to provide news to either people or other organizations. This is done by serving an "RSS feed" from a website. An RSS feed is simply a link to an XML file that is structured in a certain way. The RSS specification tells us the expected structure of the XML file. For example, the title, author, and description tags are required, 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 both the 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 you can 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 are passing over the work of processing the RSS XML file to the web browser, thus reducing server load. Also, Ajax allows the user to have a more seamless web experience, because we are able to fetch the entire RSS 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 RSS in a simple and elegant way.

For the purposes of this article, you don't need to be familiar with Ajax; however, a basic understanding of JavaScript is strongly recommended.

Here's how the parser is going to work: first, the file name of the RSS feed is selected in an HTML form. Once the user clicks Submit, the getRSS() function is called. This function is responsible for fetching the specified 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 RSS JavaScript object to us by updating the HTML page. The diagram below summarizes these steps:

general design
Figure 1. General design

The HTML File

To begin, we'll have a look at the HTML file. The top half (the form element) determines which RSS feed to fetch, while the bottom half (the root div element) is used to display the information contained in the RSS JavaScript object.

<html>
<head>
    <!--B-->
    <script language="javascript" src="rssajax6.js"></script>
    <!--C-->
    <style type="text/css">
        #chan_items { margin: 20px; }
        #chan_items #item { margin-bottom: 10px; }
        #chan_items #item #item_title { font-weight: bold; }
    </style>
</head>
<body>
    <!--A-->
    <form name="rssform" onsubmit="getRSS(); return false;">
        <select name="rssurl">
            <option value="test-rss.xml">test RSS feed</option>
            <option value="google-rss.xml">google RSS feed</option>
        </select>
        <input type="submit" value="fetch rss feed" />
    </form>

    <div id="chan">
        <div id="chan_title"></div>
        <div id="chan_link"></div>
        <div id="chan_description"></div>
        <a id="chan_image_link" href=""></a>
        <div id="chan_items"></div>
        <div id="chan_pubDate"></div>
        <div id="chan_copyright"></div>
    </div>
</body>
</html>

For now, we will ignore most of the HTML and focus on the form element (labeled <!--A--> above). The names of the RSS XML files are specified in the value attributes of the option tags of the select element. The user selects one of these files, and then submits the form. The JavaScript that starts the whole process is found in the onsubmit tag. After calling the JavaScript function, we add return false to prevent the entire form from being sent to the server the "conventional" way. If we'd omitted return false, the entire page would refresh and we'd lose all the data that was fetched via Ajax. One last thing: note that the JavaScript code is included in the header as a reference to a separate file (labeled <!--B-->). In case you're wondering, the contents of the <style> tag (labeled <!--C-->) tell the browser how to display the RSS data when it's written to the HTML page by the showRSS(RSS) function.

Pages: 1, 2, 3, 4, 5

Next Pagearrow