I've taken online classes in AJAX programming the second half of 2006, and I had my written exam just a few days before X-mas so I thought I'd share a couple of AJAX code examples here now..
AJAX isn't, as many believes, a new programming language, but just a new way to use existing ones.
AJAX is an acronym for
Asynchronous
JavaScript
And
XML, but the XML part isn't entirely correct since it can use most types of data like JSON, HTML and even plain text..
You can learn more about AJAX from W3Schools here:
http://www.w3schools.com/ajax/default.asp
And Wikipedia here:
http://en.wikipedia.org/wiki/Ajax_%28programming%29
Here's a few functions that can be quite handy for "AJAXifying" your site by getting data from your server asynchronously:
Put this one in a separate javascript file, like ajax.js
HTML Code:
//AJAX example downloaded from Datalk.com
//Please don't remove this header if you use this code on your site(s)!
function GetDataFromServer(url, eventhandler, waitelementname, waitmessage) {
//Puts a message (text, image etc.) in an element.
//Could be a waiting graphics (spinning disc etc.) like <img src='waiting.gif' /> in there
document.getElementById(waitelementname).innerHTML = waitmessage;
//Creating the most important thing, the XHR (XMLHttpRequest) object
//Can be created in different ways depending on the browser, but the following code should take care of that.
var XHRobject = null;
try {
XHRobject = new XMLHttpRequest(); // For Firefox, Opera, ...
}
catch(err1) {
try {
XHRobject = new ActiveXObject("Microsoft.XMLHTTP"); // Some IE versions
}
catch(err2) {
try {
XHRobject = new ActiveXObject("Msxml2.XMLHTTP"); // Other IE versions
}
catch(err3) {
XHRobject = false;
}//catch 3
}//catch 2
}//catch 1
//If the XHRobject was succesfully created the following code will be executed
if (XHRobject) {
XHRobject.onreadystatechange = function() {
//Checks the readystate. 4 = done loading.
if (XHRobject.readyState == 4) {
eventhandler(XHRobject);
delete XHRobject; //Doing some "cleaning"
XHRobject = null; //Reset the XHRobject again
//Removing the waitmessage since everythings done now
document.getElementById(waitelementname).innerHTML = "";
}//if
}
XHRobject.open("GET", url); //Gets the data from the server (from the var "url") using GET method (POST is also possible)
XHRobject.send(null); //not sending anything extra for now.
}
//Error message if the XHR object couldn't be created
else {
document.getElementById(waitelementname).innerHTML = "XHR Error!";
}
}//Done with GetDataFromServer
//Simple function to initiate the asynchronous transfer from the server
//Most of the info here are hardcoded, but it's easy to adapt and make it more dynamic
//The function ShowData will process the XHR object data, and you don't use () on functions here by the way..
function GetData(){
url = "test.txt";
GetDataFromServer(url,ShowData,"waiting","<img src='waiting.gif' />");
}//Done with GetData
//Function that displays the data fetched from the server in a spesific element.
function ShowData(XHR){
document.getElementById("data").innerHTML = XHR.responseText;
}//Done with ShowData A simple HTML file you can test this on
HTML Code:
<html> <head> <title>Test</title> <script type="text/javascript" src="ajax.js"> </script> </head> <body> <div id="dummy"> <form> <input type="button" value="click me" onclick="GetData()"> </form> </div> <div id="waiting"></div> <div id="data"></div> </body> </html>
Just create a text file named "test.txt" and put some random content in it and place it in the the same folder as ajax.js and the html file.
This simple AJAX code will load the content from that text file asynchronously and display it in the div element "data" when it's done.
The gif file waiting.gif will be displayed in the div element "waiting" until the loading process is done (wont take long in this example...)
This is a very simple AJAX code, but if you know Javascript and a server-side scripting language like PHP/ASP.Net etc. it's possible to modify it and use it in many other ways.
I've also attached a zip file containing all files from this code so you can test it on your own computer.
Don't have to upload it to a server, just click the file datalk.htm to test it.
I've also created a simple news feed site using AJAX (for one of the AJAX lessons last year) where you can see the almost exact same code "in action"
The site/page is in Norwegian, but you should hopefully get the point anyway..
It calls a PHP script on the server everything a new source is chosen.
The PHP script gets the RSS data and creates HTML code that is loaded asynchronously to your browser.
And here it is:
www.nyheter.ws 
(going to upgrade it a lot later, with new functions and lots of more feeds)
My
Custom made Dynamic Forum signature Images page also uses AJAX for the previews.
