So as my first real post here I figured I would explain how I put this site together.

To start, I'll talk about the elements that I integrated from work others have done. I wasn't interested in using many graphics, but still wanted to give the illusion that I had used graphics. Alessandro Fulciniti had developed a "nifty" little script that parsed certain elements and strategically placed DIV's to create corners. You can read the full article on his site. The next element is the MP3 player. I wanted to allow visitors to listen to the same music I do, if they are interested. The only real effective way of doing this is Flash. I found a very nicely done Flash MP3 player that also had a small Javascript API from the creator of Varal. This tool allowed me to embed an MP3 player and skin it the way I wanted with the functionality I wanted.

Next I'll talk about the client-side scripting, or as some dub it, AJAX. The first thing I did was create a function to make get-method HTTP requests with, I call this function loadXMLDoc().

function loadXMLDoc(url, func, obj)
{
	C_XMLRequest(url, func, obj);
	if (window.XMLHttpRequest)
	{
		req = new XMLHttpRequest();
		req.onreadystatechange = func;
		req.open("GET", url, true);
		req.send(null);
	}
	else if (window.ActiveXObject)
	{
		req = new ActiveXObject("Microsoft.XMLHTTP");
		if (req)
		{
			try{
				req.onreadystatechange = func;
				req.open("GET", url, true);
				req.send();
			}catch(e){
				go = function(){loadXMLDoc(url, func, obj);}
				setTimeout("go()", 100);
			}
		}
	}
}

The function C_XMLRequest is a constructor I use to store all information related to this request. Once the request has been sent, I retrieve it like so:

function displayXML()
{
	if (XMLResponse())
	{
		XMLDoc = ie ? C_XML["XML"].documentElement : C_XML["XML"].childNodes[0];
		document.getElementById(displayObj[0]).innerHTML = XMLDoc.getElementsByTagName("content")[0].firstChild.nodeValue;
		displayObj[0] = "content";
		// must re-evaluate dynamic events
		addDYNEvents();
	}
}
function XMLResponse()
{
	if (req.readyState == 4)
	{
		if (req.status == 200)
		{
			// store response packet
			C_XML["XML"] = req.responseXML;
			// hide loading screen
			document.getElementById("loadingScreen").style.visibility = "hidden";
			return true;
		}
		else
		{
			go = function()
			{
				loadXMLDoc(C_XML["url"], C_XML["func"], C_XML["obj"]);
			}
			setTimeout("go()", 1);
		}
	}
}

XMLResponse() checks and makes sure that an XML packet was successfully retrieved then displayXML() parses the packet for the content, which is contained in the node . Here is what my XML packets look like:

<root>
	<requeststatus code="1">
		<success>
			<![CDATA[ 
				Page request successful.
			]]> 
		</success>
	</requeststatus>
	<pageinfo>
		<title>Front</title> 
		<location>
			<page fuse="front" title="Front" /> 
		</location>
	</pageinfo>
	<content>
		<![CDATA[ 
		Content goes here, you can use HTML
		]]> 
	</content>
</root>

I did also create a post method request function, I'll put it here in case you may want to reference it.

function postXMLDoc(url, func, obj)
{
	// build post request data
	data = buildPostRequest(obj);
	C_XMLRequest(url, func, obj);
	if (window.XMLHttpRequest)
	{
		req = new XMLHttpRequest();
		req.onreadystatechange = func;
		req.open("POST", url, true);
		req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
   		req.setRequestHeader("Content-length", data.length);
   		req.setRequestHeader("Connection", "close");
		req.send(data);
	}
	else if (window.ActiveXObject)
	{
		req = new ActiveXObject("Microsoft.XMLHTTP");
		if (req)
		{
			try{
				req.onreadystatechange = func;
				req.open("POST", url, true);      
				req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
     			req.setRequestHeader("Content-length", data.length);
     			req.setRequestHeader("Connection", "close");
				req.send(data);
			}catch(e){
				go = function(){postXMLDoc(url, func, obj);}
				setTimeout("go()", 100);
			}
		}
	}
}
function buildPostRequest(obj)
{
	var data = "";
	fObj = getParentForm(obj);
	for (e=0; e < fObj.elements.length; e++)
	{
		switch(fObj.elements[e].type)
		{
			case "checkbox" : if (fObj.elements[e].checked){fObj.elements[e].name + "=" + escape(fObj.elements[e].value) + "&";}
			break;
			case "select-one" : data += fObj.elements[e].name + "=" + escape(fObj.elements[e].options[fObj.elements[e].selectedIndex].value) + "&";
			break;
			default : data += fObj.elements[e].name + "=" + escape(fObj.elements[e].value) + "&";
			break;
		}
	}
	// loading screen for post requests
	document.getElementById("loadingScreen").style.top = fObj.offsetTop + 80 + "px";
	document.getElementById("loadingScreen").style.left = fObj.offsetLeft + 200 + "px"
	document.getElementById("loadingScreen").style.width = fObj.offsetWidth + "px"
	document.getElementById("loadingScreen").style.height = fObj.offsetHeight + "px"
	document.getElementById("loadingScreen").style.visibility = "visible";
	return data;
}

Next post I'll talk about how I used the Flickr API with a ColdFusion wrapper to display all my photos. If anybody wants to hear more detail on the server-side programming, just leave a comment here.

Flickr coding javascript programming Febuary2006 AJAX api