AJAX stands for Asynchronous Java and XML. It is mainly a mix of several technologies such as HTML, CSS, JavaScript, The Document Object Model and the XMLHttpRequest object (an object that lets you make requests to a server). AJAX lets you make web based user interfaces more responsive by letting you update sections of the page without refreshing the entire page.
This article helps you get started with AJAX. You are expected to know some web related technologies and terms such as
We have 2 pages - index.jsp & details.jsp
index.jsp: This one just lists certain terms on the page and the user can click on a link (there's a link for each term) to fetch the definition of that term.
definition.jsp: This one fetches the definition for different words from a database. This page takes in the word id as a URL parameter and does the necessary lookups to get the definition of the word. I shall not go into the source code for this page. Just consider it to be a simple server side page that returns dynamic content based on URL parameters. (This page can be a simple static HTML page as well. But it makes it easier to see the benefits of a AJAX (and I mean callbacks to the server to get more information) when the content is something that is not static and cannot be loaded with the index.jsp itself.
<html>
<body>
<script language="Javascript" type="text/javascript">
<!--
function createRequestObject() {
var tmpXmlHttpObject;
//depending on what the browser supports, use the right way to create the XMLHttpRequest object
if (window.XMLHttpRequest) {
// Mozilla, Safari would use this method ...
tmpXmlHttpObject = new XMLHttpRequest();
} else if (window.ActiveXObject) {
// IE would use this method ...
tmpXmlHttpObject = new ActiveXObject("Microsoft.XMLHTTP");
}
return tmpXmlHttpObject;
}
//call the above function to create the XMLHttpRequest object
var http = createRequestObject();
function makeGetRequest(wordId) {
//make a connection to the server ... specifying that you intend to make a GET request
//to the server. Specifiy the page name and the URL parameters to send
http.open('get', 'definition.jsp?id=' + wordId);
//assign a handler for the response
http.onreadystatechange = processResponse;
//actually send the request to the server
http.send(null);
}
function processResponse() {
//check if the response has been received from the server
if(http.readyState == 4){
//read and assign the response from the server
var response = http.responseText;
//do additional parsing of the response, if needed
//in this case simply assign the response to the contents of the <div> on the page.
document.getElementById('description').innerHTML = response;
//If the server returned an error message like a 404 error, that message would be shown within the div tag!!.
//So it may be worth doing some basic error before setting the contents of the <div>
}
}
-->
</script>
<h1>Have you heard these terms before?</h1>
<p>
Ceraunophobia <a href="javascript:makeGetRequest(1)">More about Ceraunophobia</a><br>
Astraphobia <a href="javascript:makeGetRequest(2)">More about Astraphobia</a><br>
Ophidiophobia <a href="javascript:makeGetRequest(3)">More about Ophidiophobia</a><br>
</p>
<div id="description"></div>
</body>
</html>
The code should be pretty simple to understand. The part within <script language="Javascript"> block is the main Javascript part that does all the AJAX calls to the server. I shall explain these later. The part after the </script> tag (the ending part of the code) contains simple html links for each of the different words (different types of fears that ppl suffer from.. couldn't come up with something better :-) ). These links basically call one of the Javascript functions named makeGetRequest() and pass in the id for the word. This id is then passed on to details.jsp (used by that page to fetch the correct data). There is also a <div> tag that is empty right now. If you do not know what the <div> tag is - you can think of it as a simple placeholder within which you can have stuff like text. Just remember that this placeholder has been assigned an id ('description' in this case) and you can refer to this placeholder by that id anytime you need to.
There are 3 Javascript functions listed and one extra line outside the function blocks.
The var http = createRequestObject() uses the createRequestObject() function to create the XMLHttpRequest object (depending on whether the user is using Internet Explorer or some other browser). This object is used to make all the AJAX requests to other pages on the server.
The second function makeGetRequest() is used to make the actual request to the server. The first line invokes the open() method on the XMLHttpRequest object. This method lets you specify the page to call on the server and also lets you specify that you want to use GET for the request. You can append parameters to the URL (the normal GET style) if you want to pass in some values to the page you are going to call. The other thing worth noting is that 'processResponse' is the name of the function that must be called when the response is received from the server. You can name this anything you want, but use the same name for the third function as well.
The third function processResponse() basically checks whether the response from the server has been received (the response is basically the text of the page returned) and assigns that text to a local variable called 'response'. After that the text within the <div> tag on the page (this text can be accessed using the property called innerHTML) is replaced with the text that was received as a response.
There are lots of things that could be changed here (and should be in production code).
I hope this article has helped you get started with AJAX. To get more information, visit the Mozilla site (http://developer.mozilla.org/en/docs/AJAX) for excellent articles on AJAX
Written by Kiran Pai
Please send your feedback or comments to feedback [at] codecoffee [dot] com