Learn AJAX - Basic AJAX

Basic AJAX

Now that we understand the concepts behind AJAX, let's put together our first AJAX-enabled web page.

AJAX 101

Open up a HTML-capable text editor (Notepad, Notepad2, Notepad++ etc.) and copy in the following:

<html>
<head>
<script>
var xhrobj;

function ajax_request() {
  if(navigator.appName == "Microsoft Internet Explorer") {
    xhrobj = new ActiveXObject("Microsoft.XMLHTTP");
  } else {
    xhrobj = new XMLHttpRequest();
  }
  
  xhrobj.open('get', 'helloworld.txt');
  xhrobj.onreadystatechange = ajax_response;
  xhrobj.send(null);
}

function ajax_response() {
  if(xhrobj.readyState == 4) {
    document.write(xhrobj.responseText);
  }
}
</script>
</head>
<body onload="ajax_request()">

</body>
</html>

Save this as ajax1.html to anywhere on your local machine or a web server. Also create a file called helloworld.txt with the text "Hello AJAX!" and save it in the same folder. Then open ajax1.html (either local or remote) with your web browser and you will see the tetx "Hello AJAX!" appear on your screen after a brief delay.

Examining our AJAX request

Let's look back at that example. This is the JavaScript code that manages the AJAX request:

var xhrobj;

function ajax_request() {
  if(navigator.appName == "Microsoft Internet Explorer") {
    xhrobj = new ActiveXObject("Microsoft.XMLHTTP");
  } else {
    xhrobj = new XMLHttpRequest();
  }
  
  xhrobj.open('get', 'helloworld.txt');
  xhrobj.onreadystatechange = ajax_response;
  xhrobj.send(null);
}

function ajax_response() {
  if(xhrobj.readyState == 4) {
    document.write(xhrobj.responseText);
  }
}

Stepping through the code, we first declare an xhrobj variable (any valid variable name will do) to store our XMLHttpRequest object. We then call the open() method on it, preparing it to fetch helloworld.txt via a GET request. We set an event handler for the "onreadystatechange" event as our ajax_response() function, which will be executed every time the state of the request changes. Finally, we send the request off to the server and wait for it to complete.

Browser support

All major browsers have near-identical implementations of XMLHttpRequest. The one exception, however, is Internet Explorer's naming of the class. To initialise the object in IE, we must create an ActiveXObject named "Microsoft.XMLHTTP". This code helps initialise our object reliably across most browsers:

  if(navigator.appName == "Microsoft Internet Explorer") {
    xhrobj = new ActiveXObject("Microsoft.XMLHTTP");
  } else {
    xhrobj = new XMLHttpRequest();
  }

Extracting the response

Once our ajax_response() function is called, we know the request has completed. To fetch the results of the request - that is, the data the server has output - we use the responseText property on our XMLHttpRequest object. Here, we simply output the data onto the page. However, in this callback function we can now do anything that relies upon the text - typically updating an element of the page with it - or we can continue and initiate another AJAX request.

« Understanding AJAX

AJAX Callback Function »

More AJAX Tutorials:
» Five Ways to Spice Up Your Site with jQuery
» AJAX Accessibility for Websites
» Creating the iPhone Unlock Screen in xHTML, CSS and jQuery
» Ajax Wireframing Approaches
» AJAX and PHP Form Processing
» A Designer's Guide to Prototyping Ajax

	Helping ordinary people create extraordinary websites!
		SIGNUP LOGIN