HOME  |  AJAX  |  SOLUTIONS  |  TECHNOLOGIES  |  E-COMMERCE  |  ABOUT US
AJAX Hello World!
This tutorial will teach you how to create a hello world web page using AJAX technologies.  Odds are if you found this tutorial, then you have created a "Hello World!" program before.  Hello World is the most basic program that you can write, and every language out there has one written.  It basically shows you how to use the language or technology to display a result on the screen.

Our AJAX hello, world web page will do just that, display "hello, world" using AJAX.   This tutorial is a perfect starting point if you have never done anything with AJAX before and are just looking for a place to get started.  If you do know the basics of AJAX, then you would probably be better off with my AJAX Chat Tutorial or AJAX Suggest Tutorial for a little bit more advanced functionality.

The AJAX hello world consists of two files:  HelloWorld.html and SayHello.html

Download the AJAX Hello World Source Code
View the Results of the AJAX Hello World Tutorial

SayHello.html only contains one line with the text "hello, world"  This is the original format of hello world as it appeared in "The C Programming Language" which is credited as being the first "hello, world" excersise back in 1978.

HelloWorld.html does all the work, but is still a very simple file.  The actual HTML code consists of only 1 HTML link and 1 span element that will display our results.
<!-- Clicking this link initiates the asyncronous request -->
<a href="javascript:sayHello();">Say Hello</a><br />
<!-- used to display the results of the asyncronous request -->
<span id="span_result"></span>

As you can see, very basic stuff.  The link simply calls a JavaScript function that we will write in just a minute.  The one thing to notice about the span is that we have given it an ID of "span_result" so we can address it through the DOM in our JavaScript.  The span could just as easily be a <p> or a <div> or any other HTML element that can contain text.

The next step that we need to do is get our browser specific XmlHttpRequest object.  Microsoft Internet Explorer uses an Active X object instead of a native XmlHttpRequst object, so this code is necessary.  I explain this code a little more on the AJAX Basics page.
//Gets the browser specific XmlHttpRequest Object
function getXmlHttpRequestObject() {
if (window.XMLHttpRequest) {
return new XMLHttpRequest(); //Not IE
} else if(window.ActiveXObject) {
return new ActiveXObject("Microsoft.XMLHTTP"); //IE
} else {
//Display your error message here.
//and inform the user they might want to upgrade
//their browser.
alert("Your browser doesn't support the XmlHttpRequest object. Better upgrade to Firefox.");
}
}
IE 7 is looks like it's going to support the native XmlHttpRequest object eliminating the need for this code, but unfortunatly people will be using IE 6 at least until 2010, so get use to writing this code in your AJAX applications - or better yet create a JavaScript include script that contains this code.

Now that we have some code to get the browser specific XmlHttpRequest object, lets create a global XmlHttpRequest object that we can use to make our Hello World call:
//Get our browser specific XmlHttpRequest object.
var receiveReq = getXmlHttpRequestObject();
Next we will write our function that is called when a user clicks our hyperlink.  This function will initiate the asycronous call.
//Initiate the asyncronous request.
function sayHello() {
//If our XmlHttpRequest object is not in the middle of a request, start the new asyncronous call.
if (receiveReq.readyState == 4 || receiveReq.readyState == 0) {
//Setup the connection as a GET call to SayHello.html.
//True explicity sets the request to asyncronous (default).
receiveReq.open("GET", 'SayHello.html', true);
//Set the function that will be called when the XmlHttpRequest objects state changes.
receiveReq.onreadystatechange = handleSayHello;
//Make the actual request.
receiveReq.send(null);
}
}
The first thing this function does it to make sure that our XmlHttpRequest object is ready to initiate a new asycronous call to the server.  If our readystate is either not started or finished the we initiate a new request.

The open method sets up the parameters of our AJAX call.  This will be marked as a "GET" transaction rather than a "POST" since it is a simple call and we aren't passing large amounts or sensitive data.  If that was the case we would probably want to use a "POST" instead.

The next line defines the function that will be called when our XmlHttpRequest objects state changes.  This can be any JavaScript function you would like.  Remeber that this function gets called on every state change not just the finished state.  You can find more information on the different readyStates here.

Finally, we make our actual AJAX call.  If this was a "POST" then we would pass our parameters here instead of null.

When the server returns the results of the asyncronous call then our XmlHttpRequest's readyState will be set to 4 - complete and our handleSayHello function will get called.
//Called every time our XmlHttpRequest objects state changes.
function handleSayHello() {
//Check to see if the XmlHttpRequests state is finished.
if (receiveReq.readyState == 4) {
//Set the contents of our span element to the result of the asyncronous call.
document.getElementById('span_result').innerHTML = receiveReq.responseText;
}
}
First thing we do is make sure that our XmlHttpRequest has finished by checking the readyState.  If it is, then we will set the contents of our span element to the returned responseText.  And that's it.  Our first AJAX web page. 

If we open our page and click the "Say Hello" link, our span tag will read "hello, world" without having to refresh the page. Certainly not very useful, but we can start to imagine the possibilites of our new found skills.

If you would like to create a more useful application with AJAX, you should check out the AJAX Chat Tutorial.