Instant AJAX Tutorial

After taking a look at this AJAX tutorial and a couple others, I was disappointed at the quality of the code so here’s a quick tutorial to get you jump started with AJAX (Asynchronous JavaScript + XML). I am using object detection and explain some of the caveats for doing what I am doing.

Simply put, AJAX allows you to make a call to an http server (typically an RSS feed or a webpage), get its content and load them into your existing page without having to refresh the whole page. This means that services like email don’t have to reload the whole page every time you click a message, saving on bandwidth (loading the header/footer all over again) and making things more efficient.

On to the AJAX code:

function loadurl(dest) {

try {
	// Moz supports XMLHttpRequest. IE uses ActiveX.
	// browser detction is bad. object detection works for any browser
	xmlhttp = window.XMLHttpRequest?new XMLHttpRequest(): new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
	// browser doesn't support ajax. handle however you want
}

// the xmlhttp object triggers an event everytime the status changes
// triggered() function handles the events
xmlhttp.onreadystatechange = triggered;

// open takes in the HTTP method and url.
xmlhttp.open("GET", dest);

// send the request. if this is a POST request we would have
// sent post variables: send("name=aleem&gender=male)
// Moz is fine with just send(); but
// IE expects a value here, hence we do send(null);
xmlhttp.send(null);
}

function triggered() {
// if the readyState code is 4 (Completed)
// and http status is 200 (OK) we go ahead and get the responseText
// other readyState codes:
// 0=Uninitialised 1=Loading 2=Loaded 3=Interactive
if ((xmlhttp.readyState == 4) && (xmlhttp.status == 200)) {
	// xmlhttp.responseText object contains the response.
	document.getElementById("output").innerHTML = xmlhttp.responseText;
}
}

The above code goes between the html <head></head> tags. The corresponding html body would be:

<body> <div id="output" onclick="loadurl('/resume/resume.txt')">click here to load my resume into this div</div> </body>

The destination URL for an AJAX request has to be in the same domain or a security error might be thrown depending on your security settings.

Here’s a working example (it loads my resume):

click here to load my resume into this div

31 Responses



This article is no longer open for comments