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 » |
