RSS - JavaScript implementations

June 23, 2008 by JavaScript  

I started my RSS adventures scripting a javascript RSS Reader and posted it on hotscripts as a download. Most people really liked it, despite the fact that javascript doesn't allow you to read remote files in certain browsers.

I feel that it would make a lot more sense doing something like this in a server side language like PHP/C# (which allows it) etc - since rss files are normally remotely hosted, which defeats the purpose if you cant read them remotely.

If you however want to go this route there is always ways to get around this issue, like copying the rss file to the server where the script is running on, or more preferrably making use of a script that acts as a proxy, simply pass your url to the proxy script and return xml from it.(like you'll see below)

<?php
    header ("content-type: text/xml");
    echo file_get_contents($_REQUEST['url']);
?>
<%@ WebHandler Language="C#" Class="rssremote" %>

using System;
using System.Web;
using System.Xml;
using System.IO;

public class rssremote : IHttpHandler {
    
    public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "text/xml";
        XmlDocument xdoc = new XmlDocument();
        xdoc.Load(context.Request.QueryString["url"]);
        context.Response.Write(xdoc.OuterXml);
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }
}
<%@ WebHandler Language="VB" Class="rssremote" %>

Imports System
Imports System.Web
Imports System.Xml
Imports System.IO

Public Class rssremote : Implements IHttpHandler
    
    Public Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest
        context.Response.ContentType = "text/xml"
        Dim xdoc As New XmlDocument()
        xdoc.Load(context.Request.QueryString("url"))
        context.Response.Write(xdoc.OuterXml)
    End Sub
 
    Public ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable
        Get
            Return False
        End Get
    End Property

End Class

Below is a simple javascript class and an Ajax implementation.

The javascript class makes use of the XML DOM to iterate through the xml nodes returned by a rss feed, and populates the javascript object with the nodes.

The ajax solution retrieves the html output from a server side script (ASP.net or PHP), which does all the work, and we display the response of what ever gets rendered into the given div.

function RSS(url)
{	
    this.items = new Array();

    try
    {
        var xmlDoc = (document.all) ? new ActiveXObject("Microsoft.XMLDOM")
						            : document.implementation.createDocument("","",null);
        xmlDoc.async = false;
        xmlDoc.load('rssremote.php?url=' + escape(url));

        this.title = getElement(xmlDoc, 'title');
        this.link = getElement(xmlDoc, 'link');
        this.description = getElement(xmlDoc, 'description');

        var items = xmlDoc.getElementsByTagName('item');
        for (var i = 0; i < items.length; i++) 
        {
            this.items[i] = new function()
            {
                this.title = getElement(items[i], 'title');
                this.description = getElement(items[i], 'description');
                this.link = getElement(items[i], 'link');
            }
        }
    }	
    catch(e)
    {
        alert(e.message);
    }

    function getElement(parent, tagName)
    {
        return parent.getElementsByTagName(tagName)[0].firstChild.nodeValue;
    }
}
function RSS(url, elementID)
{
    var html = document.getElementById(elementID);
    var xmlhttp = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
    	
    if (xmlhttp)
    {
        html.innerHTML = '<img src="img/ajax-loader.gif" />';
        xmlhttp.onreadystatechange = function() 
        {	
            if (xmlhttp.readyState==4) 
            {
                var html = document.getElementById(elementID);
                try
                {
                    html.innerHTML =(xmlhttp.status == 200) ? xmlhttp.responseText : "RSS failed to load, error " + xmlhttp.status;
                }
                catch(ex)
                {
                    html.innerHTML = ex.description;
                }
            }
        }
        xmlhttp.open("GET", "php/xmlhttp.php?url="+escape(url),true);
        xmlhttp.send(null);
    }
}

Other solutions

Using javascript, we dont have as many choices as on a server side language when it comes to generating rss output - but like you can see there is a few.

Thinking about other clientside solutions in general, one can always go the flash route, maybe even consider writing a java applet, write yourself an activeX component etc - or if you feel the urge write a xbap rss reader.


Leave a Comment



Related Posts

RSS - C#/VB.NET implementations

June 23, 2008

RSS - PHP (4, 5) implementations

June 23, 2008


Related Downloads

How to create a RSS Reader