This is very useful in many cases, and it has been pulled off beautifully, and yet simply in many applications; such as GMail which uses AJAX to request all of it's data from the server, using it all dynamically in the one page.
Now on to the juicy part... If you're reading this, you've probably tried to use AJAX, and are still confused.
Well I put together a little something to make it extremely easy for you to understand how it works. Two functions, simple AJAX implementation. Details after the jump.
- Code: Select all
//Call this upon loading the page to initialize the AJAX object
function ajaxInit()
{
//Cross-browser compatability stuff (A)
try {xmlHttp = new XMLHttpRequest();} catch (e)
{try {xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");} catch (e)
{try {xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");} catch (e)
{addConsoleText("Browser does not support AJAX!");}}}
}
//This is the good bit, this function requests any url, and outputs the file
function ajaxRequest(url)
{
//Bind AJAX state change to our function (B)
xmlHttp.onreadystatechange = function ajaxProgressChange()
{
if (xmlHttp.readyState == 4)
{
//Request Complete
alert(xmlHttp.responseText);
}
}
//Tell AJAX to load the url specified
try {xmlHttp.open("GET",url,true); try {xmlHttp.send(null);} catch (e)
{return('Error retrieving file.');}} catch (e)
{return('AJAX failed to send HTTP request.');}
}
Now for a little explanation:
(A) - Internet Explorer, as usual, doesn't like to play nice and conform to the web standards, so we have to make reservations for all those not learned* enough to use a better browser. For most other browsers, Firefox, Netscape, Opera, Mozilla; The XML/HTTP Request object (stored in the variable xmlHttp, and herein referred to as the "AJAX object") is simply XMLHttpRequest. IE seems to think ActiveX is the way to go. Ten points to Microsoft on that one.
* - Not the word I wanted to use, but I'm trying to be nice today... *Twitch*
(B) - AJAX, which in case you didn't know, stands for Asynchronous Javascript and XML. Let's focus on that first letter. Asynchronous means that when you tell it to do something, it will operate in a seperate thread to your script, and therefore you will need to watch it to find out if it changes. To do this we bind our function ajaxProgressChange() to the onreadystatechange event within our AJAX object.
So let's take a look at an example.
Let's say I have a page called index.htm, our AJAX code in a file named ajax.js, and a PHP file called data.php. Now for simplicity sake, and readability, I'm going to make this example very simple, but expanding beyond it isn't difficult at all.
Now in the HTML file, index.htm, we have this:
- Code: Select all
<html>
<head>
<title>AJAX Example</title>
<script type="text/javascript" href="ajax.js"></script>
</head>
<body onLoad="ajaxInit();">
<div>This is a test page. <a href="javascript: ajaxRequest("data.php");">Click here to perform AJAX function.</a></div>
</body>
</html>
And in our PHP file, data.php, we have this:
- Code: Select all
echo "Lorem ipsum dolor sit amet.";
Now when we click on our link, AJAX will request the page, and upon retreival it will pop up an alert box containing "Lorem ipsum dolor sit amet.".
So waht have we learned?
1: Internet explorer is lame.
2: AJAX is easy.
3: Internet explorer is for idiots.