Home Contact Sitemap Todo Money

Alan K Holden

Accomplished Internaut

The IT Zen of Futurama
The IT Zen of Futurama

Bender learns a core principle of Information Technology:

Users clamor for change, but some might complain when you give it to them.

Foundations of Ajax

Back in the olden days, before JQuery, YUI, Spry and all the other frameworks; computers were powered by steam. We had to write our own xmlHttpRequest objects - and resulting screen magic - in JavaScript.

Here was one of my earlier call scripts. It was extended from examples in a book I bought called "Foundations of Ajax", by Ryan Asleson and Nathaniel Schutta.

// Al's lightweight ajax gizmo
var xmlHttp;
var resultString = '';
var isResultSuccess = false;
var targetContainer = '';
function createXMLHttpRequest()
{
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
// JScript gives us Conditional compilation, we can cope with old IE versions.
// and security blocked creation of the objects.
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlHttp = false;
}
}
@end @*/
// non JScript browsers will wind up here
if (!xmlHttp && typeof XMLHttpRequest!='undefined') {
try {
xmlHttp = new XMLHttpRequest();
} catch (e) {
xmlHttp=false;
}
}
if (!xmlHttp && window.createRequest) {
try {
xmlHttp = window.createRequest();
} catch (e) {
xmlHttp=false;
}
}
// your basic xmlHttp request object should exist now...
}
// here's the actual function to call to accomplish a content pull
function makeRequest(url,tc)
{
targetContainer = tc;
createXMLHttpRequest();
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}
// this function is called when makeRequest gets something back from the server
// some browsers won't show new content plopped into old spans, hence the slight
// of hand in creating a new span and swapping it out with the old one.
function handleStateChange()
{
isResultSuccess = false;
// state 4 fires when the exchange is complete
if(xmlHttp.readyState==4)
{
// status 200 is web server speak for 'everything went well'
if(xmlHttp.status == 200)
{
isResultSuccess = true;
resultString = xmlHttp.responseText;
if(isResultSuccess)
{
// create temp span to replace existing
var childSpan = document.createElement('span');
childSpan.id = 'temp_'+targetContainer;
// insert the AJAX response string
childSpan.innerHTML = resultString;
// remove the old span;
killKids(targetContainer);
// now append the new span
findObj(targetContainer).appendChild(childSpan);
//dispense with temp span
delete childSpan;
}
else
{
alert('Request result for '+ targetContainer +'produced an error');
}
}
else
{
alert('Error within the incoming code for '+ targetContainer +': ' + xmlHttp.status);
}
// if my parent script set some kind of 'please wait' page style before the
// call to makeRequest, here is where I would set the style back to normal
}
resultString = '';
isResultSuccess = false;
}
// this is used by function handleStateChange above
function killKids(nodeName)
{
var parentSpan = findObj(nodeName);
if (parentSpan.hasChildNodes())
{parentSpan.removeChild(parentSpan.lastChild);}
}

 

My Details
Subscription Settings

Hear about status updates or new posts.