Subscribe to Catching up with 52 Weeks of Code        RSS Feed
-----

Week 37 - XML

Icon Leave Comment
XML itself is just a format for storing data. It is however, very flexible and relatively easy to parse due to it's structure so it is used almost everywhere for passing data over the internet.

One place it's used universally is in RSS feeds for displaying news and updates. Google has released a service called Google Buzz that combines a users publishing accounts (Twitter, Blogger, Buzz's own news events and others) and publishes it as one news feed for that user. On my own website, I wanted a sidebar to display the recent updates and decided to use Buzz as a convenient news source.

I've created the following Javascript functions which load the published Buzz feed for a specific user, parse the XML items and populate an HTML div with the latest entries. I use jQuery for it's DOM manipulation but you could easily get rid of any jQuery dependencies. I should also note that this is not designed with compatibility in mind, so may break for older versions of IE. The fix for that is to check the browser in the first function and load the XML feed with the appropriate function.

On my server I make a simple cron job to copy googles XML file over to a local file on the webserver. This simplifies cross-domain requests which can open security holes if you aren't careful. SokerCap is my google username, so that can be replaced with the relevant username.
*/25 * * * * wget http://buzz.googleapis.com/feeds/SokerCap/public/posted -O /home/(username)/Site/root/static/misc/buzz.xml




loadBuzz() is called when the document is loader in order to download the Buzz feed
function loadBuzz(){
	var browser = navigator.appName ;
	var xhttp = ajaxRequest();
	xhttp.open("GET","/static/misc/buzz.xml",false);
	xhttp.onerror = parseBuzzFail ;
	xhttp.send("");
	buzzDoc = xhttp.responseXML;
	if(xhttp.status == 200) { parseBuzz(); }
	else { 
		alert("Jiminy no doc- status: "+xhttp.status+" \ncontentType: "+xhttp.statusText);
	}
} 


fairly straight forward. Opens a new jQuery ajax object, requests the xml file and calls the appropriate function if it is successful (response code 200) or fails.

parseBuzzFail() is called if the http request fails to retrieve the xml file. It can be used to gracefully fail so the user isn't surprised by ugly error messages. I, however, chose to just be lazy and use an alert
function parseBuzzFail()
{
	alert("Buzz FAILED ");
}




parseBuzz() is the main function used when the XML file is loaded. It loops through the news items and loads the specified DIV with entries
function parseBuzz(){
	if(!buzzDoc) return;
	if(isIE && buzzDoc.readystate != 4) return;
	
	var entries = buzzDoc.getElementsByTagName("entry") ;
	var html = "<ul><li><b>Latest Buzz:</b></li>\n";
	for(var i=0; i<entries.length;i++)
	{
		html =html + "<li>";
		if( entries[i].getElementsByTagName("updated").length > 0) html += "<span class='buzzbox'><i>"+entries[i].getElementsByTagName("updated")[0].childNodes[0].nodeValue+"</i></span><br>";
		if( entries[i].getElementsByTagName("link").length > 0) html += "<a href='"+entries[i].getElementsByTagName("link")[0].getAttribute("href")+"'>";
		else html += "<a target='#'>";
		html =html + entries[i].getElementsByTagName("summary")[0].childNodes[0].nodeValue+"</a></li><li></li>\n";
	}
	html += "</ul>";
	
	$("#DV_BUZZBOX").html(html);
	
}


The first few lines make sure the XML file was actually retrieved before trying to manipulate it. It then retrieves every "entry" item in the xml file, and loops through adding it as a new list item, with the actual entry information contained in an html <span> . #DV_BUZZBOX is the ID of the div I then want to fill with the entries.

0 Comments On This Entry

 

Trackbacks for this entry [ Trackback URL ]

There are no Trackbacks for this entry

July 2014

S M T W T F S
  12345
6789101112
13141516171819
20212223242526
272829 30 31  

Tags

    Recent Entries

    Search My Blog

    0 user(s) viewing

    0 Guests
    0 member(s)
    0 anonymous member(s)

    Categories