Java and AJAX programming: introduction

AJAX is a methodology for web programming that allows more "interactive" pages to be created. The term AJAX means the technique of making server requests from the browser without completely replacing the current web page. The idea is that a given web page includes some JavaScript (or some other client-side script) that:

• fetches data from the server;
• uses that data to update the current web page rather than completely re-loading the page.

Thus, we depart from the traditional model where every page update involves completely replacing the current page with a new one when the user clicks on a link.

The essential ingredient that makes AJAX programming possible is the XMLHttp ActiveX object (in Internet Explorer), or its equivalent XMLHttpRequest object on other browsers. This component makes it convenient to send server requests (and process responses) from JavaScript, particularly in XML format. Thus, AJAX actually stands for Asynchronous Javascript and XML. There's no actual obligation to use XML when transferring data to/from the server. But if you do, both JavaScript (on the client) and Java (on the server) provide facilities for dealing with XML, so for fairly structured data it's a reasonable choice.

What's involved in AJAX programming?: methodology overview

The typical steps and methodology for writing an AJAX application with Java and JavaScript involve the following, which we look at over the next few pages:

• within our web page, defining which elements we want to change dynamically, by assigning an ID string to them;
• writing JavaScript methods to handle user clicks on certain elements on the page (buttons etc): see the section on JavaScript event handlers;
• within those JavaScript methods, making a call to the server via the XMLHttpRequest object to request some data from the client;
• on the server, writing a Servlet to handle such requests and spit back the data (usually in XML format);
• back on the client, processing the received data and and updating web page elements (via their ID) to reflect the received data.

In many AJAX applications, we also need to manipulate the CSS attributes of HTML elements, in order to make them appear, disappear, change position etc.

---