Ajax Avenue Street Sign


This is part 2 of the AJAX Tutorial Series. You can see the Beginners AJAX Tutorial Part 1 here.

In this part, we will start you off with some very simple code just to show you how things get started. At the end of this tutorial you will have made your own ‘hello world’ AJAX script… (not a big deal I know, but you have to start somewhere!). I’ll keep these tutorials bitesize and introduce a new command or concept on each tutorial to add to what has already been covered. Today, we start at the beginning with something that will be in all future scripts…

The XMLHttpRequest Object

The what? :-)
The XMLHttpRequest object is at the heart of AJAX. It allows you to send and receive data with javascript without refreshing the page and works on all browsers (except, you guessed it! Internet Explorer). All you have to do is find out if the browser supports it with an ‘if’ statement in the javascript contained in the <head> part of the html page and then create a XMLHttpRequest object using the ‘new’ command;

[javascript]if (window.XMLHttpRequest) {
XMLHttpRequestObject = new XMLHttpRequest();}[/javascript]

That would create a XMLHttpRequest object and store it in XMLHttpRequestObject.

But, what about Internet Explorer?.. We can’t use XMLHttpRequest so we have to use an ActiveXObject. For us to do anything with an XMLHttpRequest and make sure it works on both IE and Firefox, we can add this to the javascript so we now have..
[javascript]if (window.XMLHttpRequest) {
XMLHttpRequestObject = new XMLHttpRequest();
} else if (window.ActiveXObject) {
XMLHttpRequestObject = new ActiveXObject(“Microsoft.XMLHTTP”);
}[/javascript]

OK, that should cover us for making a XMLHttpRequest object, we can’t do anything in this tutorial series without it so to be sure, lets just create the whole html document and test to see if it can make an object by adding another ‘if’ statement to output some text to the screen if the object creation was successful using the javascript command ‘document.write()’.
[html]

var XMLHttpRequestObject = false;

if (window.XMLHttpRequest) {
XMLHttpRequestObject = new XMLHttpRequest();
} else if (window.ActiveXObject) {
XMLHttpRequestObject = new ActiveXObject(“Microsoft.XMLHTTP”);
}

if (XMLHttpRequestObject) {
document.write(“

Hello World! I Created an Object!

“);
}

[/html]

You can click on the title of the code snippet above and see the plain text version, just copy this to your own file and save it as an HTML document or right click here and save it and test it. If it’s working, it will display the message “hello world! I created an object!” in big letters.

YEY! we created a ‘hello world’ AJAX program!, I know it’s not much use yet but this is the foundation for all future tutorials so even thought it’s not that ‘sexy’ , it IS important to make sure we can create the object that will handle the data being sent to and received from a remote file.

We can get into the sexy ins and outs of using this on the next tutorial. Please come back again to see how we can use this to open a remote file and display it’s contents on a HTML page without a reload…(ooh, I can’t wait….)
:-)