Parsing RSS feeds with the DOM and JavaScript

Parsing RSS feeds with the traditional DOM approach is not the simplest way to perform this task. However, if you want to get a finer control over the whole process, this may be a feasible way. Here's the basic code to achieve this goal:

function XMLDoc() {
 var me = this;
 var req = null;
 if (window.XMLHttpRequest) {
  req = new XMLHttpRequest();
 }
 
 else if (window.ActiveXObject) {
  try {
   req = new ActiveXObject("MSXML2.XMLHttp.6.0");
  }
  catch(e) {
   try {
    req = new ActiveXObject("MSXML2.XMLHttp.3.0");
   }
  catch(e) {
   req = null;
  }
  
  }
 }
 
 
 this.request = req;
 this.loadXMLDoc = function (url, handler) {
  if (this.request) {
   this.request.open ("GET", url, true);
   this.request.onreadystatechange = function () {
    handler(me);
   };
   this.request.setRequestHeader("Content-Type", "text/xml");
   this.request.send(null);
  }
 };
}

function initXML () {
 var newrequest = new XMLDoc();
 newrequest.loadXMLDoc("rss.xml", getRSS);
}

function getRSS (req) {
 req = req.request;
 var content = document.getElementById("content");
 var div = document.createElement("div");
 div.className = "entries";
 var h3 = document.createElement("h3");
 h3.innerHTML = "Recent entries";
 div.appendChild(h3);
 var ol = document.createElement("ol");
 div.appendChild(ol);
 
 
 if (req.readyState == 4 && req.status == 200) {
  var root = req.responseXML.documentElement;
  var items = root.getElementsByTagName("item");
  
  
  for (var i=0, len=items.length; i<len; i++) {
  
  
   var title = items[i].getElementsByTagName("title")[0].firstChild.nodeValue;
   var link = items[i].getElementsByTagName("link")[0].firstChild.nodeValue;
   var li = document.createElement("li");
   li.innerHTML = "<a href='" + link + "'>" + title + "</a>";
   
   
   
   ol.appendChild(li);
   
   
   
  
  
  
  }
  
  content.appendChild(div);
  
  
  
  
 }
}


window.onload = initXML;

The first object, XMLDoc, creates and returns an XHMHttpRequest object. It also opens the given resource and sets the content type for the Ajax request (in this case, it uses the HTTP verb GET) through the loadXMLDoc() function, which also accepts a function reference to handle the request via the onreadystatechange event. The function initXML() uses an instance of XMLDoc to set the event handler to the function getRSS().

The getRSS() function simply retrieves a DOMDocument instance from the XMLDoc object, loops through all item elements by starting at the root of the XML document (using responseXML.documentElement as reference) and then extracts the values of the link and title elements to create XHTML links.

Although this approach actually allows you to see all the details of an Ajax connection, it's better to use the Ajax functionality of some JavaScript library (such as jQuery or Prototype) in order to simplify the code and avoid redundance. Futher, if you want to use this DOM approach, you should cache your data and use local variable reference instead of global reference. For example, instead of writing:

var content = document.getElementById("content");
var div = document.createElement("div");

you should write:

var doc = document;
var content = doc.getElementById("content");
var div = doc.createElement("div");

By doing so, you avoid global lookups and improve the performance of your script.