AKH Online, Inc

Accomplished Internauts

Spooky Emails About your Domain Name: You get messages about the status of your domain name, or threats about its future. Some are real and others are fake.

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);}
}