How to Create Remote Ajax Requests

By Kris Hadlock

Aggregating Feeds

The second JavaScript file, Aggregator, is the object that will receive the callback from the Ajax request in the index. It's Read method will get an XML response and parse the titles, links and items from the feed. It will then create an instance of a Feed object, which we'll create in a moment, based on the parameters that we pass to it. Once the feed is instantiated we push it into an array of feeds for later usage and fire the displayFeedTitles method. This method gets the title of the latest feed and displays it in the leftColumn, it then calls the DisplayTitles method, which iterates through all of the titles and adds them underneath the feed title. The last method, DisplayItem, will be called from the Feed object when a specific item from that feed is clicked on, it will then get the details from that item and display them to the user.

<div style="width: 700px;">
 <textarea name="code" class="javascript" cols="60" rows="10">
  Aggregator = new Object();
  Aggregator.feedCollection = new Array();
  Aggregator.Read = function(xml)
  {
   var title = xml.getElementsByTagName('title')[0].firstChild.data;
   var _link = xml.getElementsByTagName('link')[0].firstChild.data;
   var items = xml.getElementsByTagName('item');
   var feed = new Feed(Aggregator.feedCollection.length, title, _link, items);
   Aggregator.feedCollection.push(feed);
   Aggregator.displayFeedTitles(feed);
  }
  Aggregator.displayFeedTitles = function(feed)
  {
   document.getElementById('titles').innerHTML += feed.GetTitle();
   Aggregator.DisplayTitles(feed.id);
  }
  Aggregator.DisplayTitles = function(id)
  {
   var titleArray = Aggregator.feedCollection[id].GetAllTitles();
   var titles = document.createElement("div");
   titles.id = "subTitle_"+ id;
   document.getElementById('title_'+id).appendChild(titles);
   for(var i=0; i<titleArray.length; i++)
   {
    titles.innerHTML += titleArray[i] +"<br />";
   }
  }
  Aggregator.DisplayItem = function(feedId, id)
  {
   var details = Aggregator.feedCollection[feedId].GetDetails(id);
   document.getElementById('description').innerHTML = details;
  }
 </textarea>
</div>

Creating a Feed Object

The final JavaScript file is a Feed object, which is constructed as a prototype. This object takes an id, title, _link and items, which are all passed to it from the Aggregators Read method. Upon instantiation a few properties are created and another method called parseItems is triggered. This method takes the items and iterates them, while accessing the linkTitle, the _link, the description and the guid. Each of the values are then placed into their own specific array to be used later when an item is clicked in the leftColumn. The other methods in this object are GetTitle, which is called from the Aggregator to get the title for the feed, GetAllTitles, which returns all of the item titles to the Aggregator to be displayed under the feed title and most importantly, the GetDetails method. The GetDetails method is where all of the content from a specific item are returned in a nice display that is rendered in the rightColumn. The details include the title, description, pubDate and most importantly a podcast player. The podcast player is from Odeo, a podcast service, and it takes the URL to the MP3 from the podcast in order to display a player to the user.

<div style="width: 700px;">
 <textarea name="code" class="javascript" cols="60" rows="10">
  function Feed(id, title, _link, items)
  {
   this.id = id;
   this.title = title;
   this._link = _link;
   this.titleArray = new Array();
   this.linkTitleArray = new Array();
   this.linkArray = new Array();
   this.descriptionArray = new Array();
   this.pubDateArray = new Array();
   this.guidArray = new Array(); 
   this.parseItems(items);
  }
  Feed.prototype.GetTitle = function()
  {
   return "<div id='title_"+ this.id +"'>" + this.title + "</div>";
  }
  Feed.prototype.parseItems = function(items)
  {
   for(var i=0; i<items.length; i++)
   {
    var linkTitle = items[i].getElementsByTagName("title")[0].firstChild.nodeValue;
    var title = "<a href='#' class='title' onclick='Aggregator.DisplayItem("+ this.id +", "+ i +");'>" + linkTitle +"</a>";
    this.titleArray.push(title);
    this.linkTitleArray.push(linkTitle);
    var _link = items[i].getElementsByTagName("link")[0].firstChild.nodeValue;
    this.linkArray.push(_link);
    var description = items[i].getElementsByTagName("description")[0].firstChild.nodeValue;
    this.descriptionArray.push(description);
    var pubDate = items[i].getElementsByTagName("pubDate")[0].firstChild.nodeValue;
    this.pubDateArray.push(pubDate);
    var guid = items[i].getElementsByTagName("guid")[0].firstChild.nodeValue;
    this.guidArray.push(guid);
   }
  }
  Feed.prototype.GetAllTitles = function()
  {
   return this.titleArray;
  }
  Feed.prototype.GetDetails = function(id)
  {
   details = "<a href='"+ this.linkArray[id] +"' target='_blank'>"+ this.linkTitleArray[id] +"</a><br/>";
   details += this.descriptionArray[id] +"<br/>";
   details += this.pubDateArray[id];
   details += '<br/><br/><embed src= "http://www.odeo.com/flash/audio_player_standard_gray.swf" quality="high" width="300" height="52" allowScriptAccess="always" wmode="transparent" type="application/x-shockwave-flash" flashvars="valid_sample_rate=true&external_url='+this.guidArray[id]+'" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>';
   return details;
  }
 </textarea>
</div>



Page 2 of 3

Previous Page
1 2 3
Next Page

Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •  
  •  
Thanks for your registration, follow us on our social networks to keep up-to-date