Jumpstart AJAX Tutorial

Days I’ve been searching after a decent, small, simple tutorial, to help me take the first steps into the World Of Ajax (Asynchronous JavaScript + XML).
None did I find… Therefor, I decided to write this small jumpstart Ajax Tutorial Thingy.
Feel free to try it, comment on it, and spread it…

First… what the heck is AJAX? Well, it is a Football team in The Netherlands, Amsterdam. if you were looking for them, and landed here, Google’s got you fooled 😉
Is it coffee too, like JAVA is? No, not really, but let me explain: AJAX is a set of technologies (Asynchronous JavaScript + XML) that allow you to make a call to an http server
(most often a RSS feed or a webpage), grab the content and show that in your existing page.
Great you say… PHP, ASP, JSP, Perl,… all can do THAT!
You are sooooo right!!!
But none can do that without reloading the page. Indeed, no refresh of your page needed. Consequence: services like email and such do not need to reload the whole shebang whenever
you click something, which makes the whole experience faster, and better for well… your bandwidth counter 🙂

Let’s see what this AJAX stuff looks like in real life:

 

function loadurl(dest) {

try {
//XMLHttpRequest is for Mozilla and the likes. IE uses ActiveX. Using an if then on the object works best, better then checking which browser it is.
xmlhttp = window.XMLHttpRequest?new XMLHttpRequest(): new ActiveXObject(“Microsoft.XMLHTTP”);
} catch (e) {
// This is where you get in to if your browser does not support AJAX. write a friendly errormessage here to tell the user to upgrade to the latest Firefox
}

// the object xmlhttp triggers an event on every status change. These events are then handled by the triggered() function.
xmlhttp.onreadystatechange = triggered;

// open is the function that will actually open your file on the server.
xmlhttp.open(“GET”, dest);

// send() well, sends the request. if this is a POST request you need
// the post variables: send(“fname=john&lname=doe)
// Mozilla can deal with send(); however
// IE needs to see a value here, so better to use send(null); in case of get (and thus no variables to send).
xmlhttp.send(null);
}

function triggered() {
// if the readyState code is 4 (Completed)
// and http status is 200 (OK), our request was succesful, and we can get the response from: responseText indeed 😉
// other readyState codes that can be usefull are::
// 0=Uninitialised 1=Loading 2=Loaded 3=Interactive
if ((xmlhttp.readyState == 4) && (xmlhttp.status == 200)) {
// xmlhttp.responseText object holds the response for you to cherish, cuddle, and use in your code.
document.getElementById(“output”).innerHTML = xmlhttp.responseText;
}
}

 

This piece of code needs to be placed between the html tags.
in the html body you need to call the function, and place the result in a way like this:
<p id=”AjaxOutput” onclick=”loadurl(‘/whatever.txt’)>click here to load the whateverfile right here!</p>

 

This whateverfile can be any text file, but also any script that returns an output, making this technologie very usefull!
do note that the destination url has to be in the same domain as the html file, or a security error can occur, depending on your security settings.
To see all that is possible with AJAX, check out Google’s automated searchbox-completion, gmail, yahoo mail, …
The list is endless, the sky is not even the limit…

 

2016 Update: I know, all of this can easily be done using jQuery, and you are right! But sometimes it is not feasible to use jQuery, and, above all, it is never a bad thing to know the mechanics behind libraries such as jQuery.

Leave a Comment





%d bloggers like this: