RSS Ajax JavaScript ticker
In this tutorial, I'll show you how to combine RSS, Ajax, and JavaScript to create a live RSS ticker. Thanks to Ajax, the conventional roles of server side and client side programming are reversed in an application like this as JavaScript- not PHP- is used to handle much of the work, including parsing the RSS file.
I've learned it's good form to always show your viewers exactly where you're leading them to begin with, so here are a couple of examples of the Ajax style RSS ticker I'll be discussing how to create:
Some blank space added here to preventing hopping.
Each ticker on the page can be invoked independently, for example:
<script type="text/javascript">
//rss_ticker(RSS_id, cachetime, divId, divClass, delay, optionalswitch)
new rss_ticker("CNN", 60, "cnnbox", "cnnclass", 2000)
</script>
A quick overview of how our Ajax RSS ticker works:
- A very simple PHP script is used to get the contents of an RSS file online and save it locally on the server for caching, unparsed in any way.
- Ajax is used to fetch the contents of the RSS file produced by the PHP script.
- JavaScript receives the contents of this RSS file (via Ajax), then parses it using standard DOM methods before displaying the feed in any manner the webmaster desires.
As you can see, the server side script, PHP in this case, does very little of the work. The majority of the workload is shifted to the client side, including much of the interface for customizing the ticker, such as the amount of time to cache the RSS file etc. It's arguably more efficient than using PHP to do all the parsing, though the main attraction for me is that I get to be in familiar territory much of the time, basked in JavaScript.
Ok, so lets get started! First stop, creating a PHP script for fetching the contents of a file online.
