AKH Online, Inc

Accomplished Internauts

Guide to Online Marketing: Here's an infographic that I found very helpful.

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