AJAX in Action

Like everyone else, I was amazed when I saw some rich client applications like Google Maps and Google Suggest. I wondered how could you do that. Well, the secret is now out, AJAX. After spending some time learning what AJAX is all about. Here is real working example of AJAX for a perfect scenario and how we are using it in gzleather.net.

What is AJAX: AJAX is an architecture and not a technology. AJAX stands for Asynchronous JavaScript And XML.

Punch Line: Lazy loading.

Problem: When gzleather.net homepage loads, it loads the description of all the items (if you have it enabled in settings). The description is not visible until you hover the mouse over the item.

The problem is that the user may not hover the mouseover every item on every channel. So pre loading all description is not good.

Solution: Using AJAX, the item description is loaded dynamically from the server only on mouseover.

This will reduce the initial page load size by more than half, there by loading the page faster for a better user experience.

Sequence Diagram:

We will first call the JavaScript function getDescription on onmouseover event. Here is the html code:

<a href="/" onmouseover="getDescription(3,1)">Java & J2EE News<a>

    var url = 'http://localhost:8080/getDescription.jsp?channelId=' + channelId + '&itemId=' + itemId;
    if (http://www.gzleather.net/spacer.gif) {
        req = new XMLHttpRequest();
    } else if (http://www.gzleather.net/spacer.gif) {
        req = new ActiveXObject("http://www.gzleather.net/spacer.gif");
    }
    req.onreadystatechange = processRequest;
    req.open("GET", url, true);
    req.send(http://www.gzleather.net/spacer.gif);

The XMLHttpRequest object will be doing the http connection to retrive the xml document. We will check to see if it is IE or not and create the XMLHttpRequest object.

    if (window.XMLHttpRequest) {
        req = new XMLHttpRequest();
    } else if (window.ActiveXObject) {
        req = new ActiveXObject("Microsoft.XMLHTTP");
    }

Set the callback function, and send the HTTP "GET" request to the server for the xml document:

    req.onreadystatechange = processRequest;
    req.open("GET", url, true);
    req.send(http://www.gzleather.net/spacer.gif);

The JSP will create the xml document with the approriate description for the channel and item numbers.

<%
String channelId = request.getParameter("channelId");
String itemId = request.getParameter("itemId");
//String description = new Channel(channelId).getItemDescription(itemId);
String description = "This is the description for the channelId: " + channelId + "and itemId: " + itemId;

if (description != null) {
   response.setContentType("text/xml");
   response.setHeader("Cache-Control", "no-cache");
   response.getWriter().write("" + description.toString() + "");
} else {
   //nothing to show
   response.setStatus(HttpServletResponse.SC_NO_CONTENT);
}
%>

Check for the response code for the HTTP request. Status is 200 for "OK".

function processRequest() {
    if (req.readyState == 4) {
        if (req.status == 200) {
          parseMessages();
        } else {
  alert ( "Not able to retrieve description" );
        }
    }
}

The readyState is 4 if the document is loaded.

readyState Status Codes:
	0 = uninitialized
	1 = loading
	2 = loaded
	3 = interactive
	4 = complete

Finally, we now parse the XML document to retrive and show the description.

Problems: The only problem, I encountered is the "&" character. The "&" is not a valid character in XML document. So I had to convert it to "&amp;".

function parseMessages() {
	response  = req.responseXML.documentElement;
	itemDescription = response.getElementsByTagName('description')[0].firstChild.data;
	alert(itemDescription);
}

Here is the code all together:

HTML Code:
<a href="/" onmouseover="getDescription(3,1)">Java & J2EE News<a>

JavaScript Code:

function getDescription(channelId,itemId) {
    var url = 'http://localhost:8080/getDescription.jsp?channelId=' + channelId + '&itemId=' + itemId;
    if (http://www.gzleather.net/spacer.gif) {
        req = new XMLHttpRequest();
    } else if (http://www.gzleather.net/spacer.gif) {
        req = new ActiveXObject("http://www.gzleather.net/spacer.gif");
    }
    req.onreadystatechange = processRequest;
    req.open("GET", url, true);
    req.send(http://www.gzleather.net/spacer.gif);
}

function processRequest() {
    if (req.readyState == 4) {
        if (req.status == 200) {
          parseMessages();
        } else {
          alert ( "http://www.gzleather.net/spacer.gif" );
				}
    }
}

function parseMessages() {
	response  = req.responseXML.documentElement;
	itemDescription = response.getElementsByTagName('http://www.gzleather.net/spacer.gif')[0].firstChild.data;
	alert ( http://www.gzleather.net/spacer.gif );
}

JSP Code:
<%
String channelId = request.getParameter("channelId");
String itemId = request.getParameter("itemId");
description = "This is the description for the channelId: " + channelId + "and itemId: " + itemId;

if (description != null) {
   response.setContentType("text/xml");
   response.setHeader("Cache-Control", "no-cache");
   response.getWriter().write("" + description.toString() + "");
} else {
   //nothing to show
   response.setStatus(HttpServletResponse.SC_NO_CONTENT);
}
%>

Resources:
AJAX Java BluePrints Solutions Catalog
AJAX in Wikipedia
W3C HTTP Status Codes

Google sites that use AJAX:
Gmail
Google Suggest
Google Maps

About the author: Jay has more than 10 years of experience in IT industry and have been working with Java & J2EE ever since they were born.