Creating Dynamic RSS Feeds with Ajax | WebReference

Creating Dynamic RSS Feeds with Ajax

By Lee Underwood


[next]

RSS has been around for quite awhile now. (The acronym stands for "Really Simple Syndication" or "Rich Site Summary," depending on who promotes it.) It's great for publishing news feeds, comments and other types of information. It's also used to syndicate material to other Web sites.

An RSS file is basically a formatted XML file (See Figure 1). As you can see, the file is difficult to read in its natural state. The file can be parsed, or interpreted, using an RSS aggregator. An aggregator is a program or script that collects the data from the XML file and presents it in a readable fashion. There are different ways of doing this. One method uses Ajax.

What is Ajax?

Ajax was coined by Jesse James Garrett back in 2005, and originally meant Asynchronous JavaScript and XML. Over time, it evolved to incorporate PHP, other development languages and technologies in addition to, or in place of, JavaScript and XML. Ajax itself isn't a language or technology; it's a group of different technologies, used in combination to communicate with a Web server and doesn't cause the current page to reload. As described by Jesse James Garrett:

"An Ajax application eliminates the start-stop-start-stop nature of interaction on the Web by introducing an intermediary — an Ajax engine — between the user and the server.... Instead of loading a webpage, at the start of the session, the browser loads an Ajax engine — written in JavaScript and usually tucked away in a hidden frame. This engine is responsible for both rendering the interface the user sees and communicating with the server on the user's behalf. The Ajax engine allows the user's interaction with the application to happen asynchronously — independent of communication with the server. So the user is never staring at a blank browser window and an hourglass icon, waiting around for the server to do something."

A major part of Ajax is the XMLHttpRequest object. Originally implemented by Microsoft in 2006, the World Wide Web Consortium (W3C) released a draft of the XMLHttpRequest object, defining it as: "The XMLHttpRequest object specification defines an API that provides scripted client functionality for transferring data between a client and a server." Other articles cover the XMLHttpRequest object in more depth. For our purposes, we'll work with this definition.

Creating a Dynamic RSS Feed

As I mentioned earlier, one of the methods of parsing an RSS feed is through the use of a script. LastRSS is a PHP class, written by Vojtech Semecky, for retrieving and parsing RSS feeds. It can be used in many different ways. It supports caching so you can set the interval it downloads feeds from the server. This prevents extra loading on the server and allows for faster page updates.

The folks over at Dynamic Drive have created a set of scripts that work with the lastRSS class, which help to bring all of this together. Here's an example of the output:

WebReference.com:

WebDeveloper.com Forums:

Single or multiple feeds can be displayed on the same page, with each feed having its own styling. Complete details are given in this tutorial.

The complete set of scripts can be downloaded here [zip file format].

Configuring the Files

There are three files used for gathering and processing the feed, not counting the Web page the feed is displayed on.

lastRSS.php

The lastRSS script itself (lastRSS.php) doesn't require any changes. It can be uploaded to your Web site as is.

bridge.php

There's another file called bridge.php. This script works to communicate ("create a bridge") between the lastRSS script and the JavaScript to output the RSS feed. Near the top of the file you'll see the following line:

If you have the lastRSS.php file in the same directory as the bridge.php file, you won't need to edit this file. Otherwise, you'll have to enter the path from this script to the lastRSS.php file, located on your server, e.g.:

Next, you'll need to set up the array for the RSS feed link. A little further down in the bridge.php file; you'll see a line that says, "// List of RSS URLs." There will already be a few other links there, which are used for the examples in the demo file. You can remove them, if you like. You'll need to set up your feed(s) in the same manner, e.g.:

Make sure the last feed doesn't end with a comma (",").

The first part (e.g., "WR") is the code to use on the Web page to reference the feed. The second part is the actual link to the feed itself.

rssticker.js

Finally, the JavaScript file, rssticker.js, might need one line changed. At the top of the file you'll see the following:

This should be fine if this is the path to the bridge.php file. If not, change it to the correct path. If you need to use an absolute URL, comment out the top path line and uncomment the bottom one, and change it to the proper path, e.g.:

The root domain will be configured automatically, you just need to add the rest of the path. In the statement above, window refers to the current window object; location provides access to and control over the URL of the current window; and hostname returns the name of the host, e.g., www.domain.com.

That takes care of the configuration for the scripts. Now we'll look at uploading them to the server.

Uploading the Files to the Server

The three files mentioned above need to be uploaded to your server. This can be done using an FTP program or whatever method you generally use for uploading files.

Unless you've set it up differently, the two files, lastRSS.php and bridge.php will be uploaded to a directory named lastRSS, which should be located just below your root directory. In the lastRSS directory, you also need to create a sub-directory called cache. This will be used to keep copies of the feeds so you don't need to keep accessing the Web server with the feed, in order to cut down on server load.

Next, upload the rssticker.js file to the directory where you keep your JavaScript files.


[next]