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).
\nNone did I find… Therefor, I decided to write this small jumpstart Ajax Tutorial Thingy.
\nFeel free to try it, comment on it, and spread it…<\/p>\n
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 \ud83d\ude09
\nIs 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
\n(most often a RSS feed or a webpage), grab the content and show that in your existing page.
\nGreat you say… PHP, ASP, JSP, Perl,… all can do THAT!
\nYou are sooooo right!!!
\nBut 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
\nyou click something, which makes the whole experience faster, and better for well… your bandwidth counter \ud83d\ude42<\/p>\n
Let’s see what this AJAX stuff looks like in real life:<\/p>\n
<\/p>\n
function loadurl(dest) {<\/em><\/p>\n try {<\/em> \/\/ the object xmlhttp triggers an event on every status change. These events are then handled by the triggered() function.<\/em> \/\/ open is the function that will actually open your file on the server.<\/em> \/\/ send() well, sends the request. if this is a POST request you need<\/em> function triggered() {<\/em> <\/p>\n This piece of code needs to be placed between the html tags. <\/p>\n This whateverfile can be any text file, but also any script that returns an output, making this technologie very usefull! <\/p>\n
\n \/\/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.<\/em>
\n xmlhttp = window.XMLHttpRequest?new XMLHttpRequest(): new ActiveXObject(“Microsoft.XMLHTTP”);<\/em>
\n } catch (e) {<\/em>
\n \/\/ 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<\/em>
\n }<\/em><\/p>\n
\n xmlhttp.onreadystatechange = triggered;<\/em><\/p>\n
\n xmlhttp.open(“GET”, dest);<\/em><\/p>\n
\n \/\/ the post variables: send(“fname=john&lname=doe)<\/em>
\n \/\/ Mozilla can deal with send(); however<\/em>
\n \/\/ IE needs to see a value here, so better to use send(null); in case of get (and thus no variables to send).<\/em>
\n xmlhttp.send(null);<\/em>
\n }<\/em><\/p>\n
\n \/\/ if the readyState code is 4 (Completed)<\/em>
\n \/\/ and http status is 200 (OK), our request was succesful, and we can get the response from: responseText indeed \ud83d\ude09<\/em>
\n \/\/ other readyState codes that can be usefull are::<\/em>
\n \/\/ 0=Uninitialised 1=Loading 2=Loaded 3=Interactive<\/em>
\n if ((xmlhttp.readyState == 4) && (xmlhttp.status == 200)) {<\/em>
\n \/\/ xmlhttp.responseText object holds the response for you to cherish, cuddle, and use in your code.<\/em>
\n document.getElementById(“output”).innerHTML = xmlhttp.responseText;<\/em>
\n }<\/em>
\n }<\/em><\/p>\n
\nin the html body you need to call the function, and place the result in a way like this:
\n<p id=”AjaxOutput” onclick=”loadurl(‘\/whatever.txt’)>click here to load the whateverfile right here!<\/p><\/em><\/p>\n
\ndo 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.
\nTo see all that is possible with AJAX, check out Google’s automated searchbox-completion, gmail, yahoo mail, …
\nThe list is endless, the sky is not even the limit…<\/p>\n