Seminar in Software Design : <Subject>

AJAX - Asynchronous JavaScript And XML

Lecturer

Roy Ben Ami and Ronen Cooper

Presentation

Abstract

These days, when a web developer wants to update a web page with data from a web server he will probably pick the approach of sending a HTTP request to the server and getting back the entire page with the new data.
Such an approach sufferers from several disadvantages :

First, it takes time!
Each time that the client needs data from the server the entire web page will be uploaded again while the user sits and waits.
Sometimes when the page is a "heavy" it can really hurt the user using experience and satisfaction from the site.
Secondly, when the number of requests from the server increases the bandwidth usage increases as well despite the fact that the needed data from the server is minor.
Another problem that today's web developer encounters, is the increasing demands to upgrade the web page design while the set of tools they can use divides to either very simple ones (HTML,DHTML) or more sophisticated ones that requires diving into technologies like Java Applets and Flash. There was a need for the missing component that will enable new design abilities that can be developed quickly and easily.

On that ground emerged Ajax. Ajax is not really a new technology but more of a new terminology invented by Jesse James Garrett in Feb 2005 to describe its use by Google. It refers to a combination of technologies that opened new opportunities in web developing, in the sense of "the whole is greater than the sum of its parts"
Ajax stands for Asynchronous JavaScript And XML and defines a fluid scope of features that use and combine the technologies of XHTML, CSS , DOM , XML, XSLT , XMLHttpRequest object and JavaScript.
The Ajax main advantage is that it's already there and doesn't requires any new frameworks in order to be used both by developers or clients.
Yet it also suffers from a few limitations :

It has a limited compatibility with very old or obscure browsers, and many mobile devices.
It has limited capabilities like multimedia, interaction with web-cams and printers, local data storage and real time graphics.

The heart of Ajax is actually the XMLHttpRequest object that allows client-side JavaScript to make Asynchronous HTTP requests to the server without reloading pages in the browser and without blocking the user.
This JavaScript object was originally introduced in Internet Explorer 5 by Microsoft and later adopted by the other browsers. Its usage saves time since the client doesn't need to wait for the upload of the entire page:
The XMLHttpRequest object talks with the server behind the scenes and enables the user to continue his work until the data is updated in the web page.
This direct data exchange between the XMLHttpRequest object and the server also saves a great deal of bandwidth while the Javascript and DOM are later used in the manipulation of the returned data into the HTML page.

The combined usage of these technolgies (XHTML, CSS , DOM , XML, XSLT , XMLHttpRequest object and JavaScript) creates the possibility of entirely new types of user interfaces not possible in traditional model.
These new design opportunities are endless and we have only showed the tip of the iceberg in the linked presentation.
As shown, Ajax provides the Middle-of-the-Road approach between sophisticated web design (Java applets and Flash) to simple web design, along with several advantages:

Ajax also doesn't require 3rd party software like Java or Flash
It fits into normal code flow
A web developer can easily dive into it since most developers already know JavaScript.

However Ajax is not free from disadvantages as well:

It has the compatibility limitations mentioned above.
Some Ajax sites have first-time long uploading time.
Because of the way it is implemented, Ajax sites have a problem with the back/forward buttons of the browser and bookmarks/favourites link
Ajax can also be easily abused by "bad" programmers.
Lastly, not all users enable JavaScript in their browsers which disables Ajax

Enhanced Ajax

As the Ajax technology rapidly spread, new engines/frameworks that eliminate the developer need to include the raw XMLHttpRequest handling in the application code have been developed.
One of those technologies is called DWR - Direct Web Remoting.
It is a Java framework that the developer can plug into the Web applications and it enables JavaScript code in the client side to call services on the server. The DWR dynamically generates JavaScript that the developer includes in the Web page in order to enables usage of their java classes on the server.
Those generated JavaScript contains stub functions that represent the corresponding methods on the Java class and also performs XMLHttpRequests behind the scenes. The DWR then invokes those methods and sends the method's return value back to the client side in its servlet response, encoded into JavaScript.

References

Ajax tutorial
Ajax and DWR tutorial
Ajax Blog
Many Ajax Resources
DWR - Direct Web Remoting Site

Demo

Overview

The demo contains 2 examples that demonstrate the use of Ajax and bring forward its advantages.
The two examples show 2 different ways to implement "improved interactive web voting system" by using Ajax.
The first example uses Ajax in its most raw form by direct handling of XMLHttpRequest object to connect with the server.
The second example will use the DWR and show its advantages over the raw XMLHttpRequest approach.

Now days when a user participates in such a voting system over the web, the entire page is refreshed/resent when the results appear.
Implementing this system with Ajax can present the voting results to the user at the same page he is already in, avoiding the wait while the page gets loaded. It can also save bandwidth since we can send only the results back, instead of the whole page.

First example
This example include 4 files (listed below) that perform the following flow:

The user click his choice.
Using JavaScript and the XMLHttpRequest we generate a request to the server (the JSP file).
The JSP file will then call a Java Bean, and give him the client’s data.
The bean will return the answers to the JSP who will transform them to XML and send them to the client.
The client will receive the answers asynchronously and display them.

The example demonstrate how the client - server connection is established and how data goes between the two sides asynchronously by using JavaScript , XMLHttpRequest , Java , and XML.

VoteSystem.java – The Java Bean
voteRaw.html - The DHTML file
voteRaw.js – The JavaScript that is included in the HTML
calcVotes.jsp – The JSP server file

Second Example
Here we show how to use DWR (Direct Web Remoting) in order to improve the lengthy process shown in Example one.
Now we don't need the JSP page anymore and we can call directly the Java Bean ourselves from the HTML page.
The DWR takes care of transferring all the data between the client and the java class.

VoteSystem.java – The Java Bean
voteDWR.html - The DHTML file
voteDWR.js - The JavaScript that is included in the HTML

Files

All the files for the demo can be found here

Installation Instructions

All we need to run Ajax is a compatible browser (Explorer, Mozilla or FireFox will do fine).
To run our examples you will also need a Web Server.
In general, you will also need a DB, but for simplicity we don't use one in our examples.

Installing the Web Server

First make sure you have installed Java SDK 1.5 (5.0) beforehand, which you can get here
Next, you need to install the web server. We picked to use Tomcat 5.5 that can be d/l here
Make sure you d/l the correct version for your operating system.
Now, install Tomcat by running the binary file you have downloaded and following the easy instructions during installation
After you got it installed, start the tomcat web server by clicking the “Configure Tomcat” program.
Press the Start button and wait until the service status says Started.
Open your browser and enter the address: localhost:8080
You should now see the Tomcat 5.5 welcome page.

Running the Demo

All the files that are needed fot the demo can be found in the ajaxdemo.zip above.
Extract the ZIP file to the following directory:
<TOMCAT_PATH>/webapps/ where TOMCAT_PATH is where you installed Tomcat to (default is C:\Program Files\Apache Software Foundation\Tomcat 5.5\).
The extraction will override the ROOT directory located there so accept the override if the OS asks you.
Included in the ROOT directory are all the files mentioned, in their correct places, and all the configuration needed in the web server in order to run the examples.
(Among them,is the dwr.jar from here that is needed to run the DWR example)

Now you can see the first example by opening your browser and entering the address: localhost:8080/voteRaw.html
You can see the exact same second example by entering the address: localhost:8080/voteDWR.html
From here you can start playing around with the files and create your own demo :)

Features & Comments

There are many features that the DWR gives us that make our life easier. The util.js that DWR provides a lot of useful methods to use the DOM such as setValue(), getValue().
In the file voteDWR.js we used the $ notation that is aliases with the getElementByID() DOM function.

Another Important feature is the built-in Debug mode in DWR that allows us to test our classes.
Go to localhost:8080/dwr and you will see list of links to the DWR classes that can be used in the HTML client. Clicking on the links will direct you to a page that will list the code that should be added to the HTML file in order to use that DWR class plus an option to test it and its methods.
The testing is performed by setting values to the method if needed, executing it and getting the results.
Try It! It can be tremendously helpful.

We added another bonus feature that gives an example to the design abilities that Ajax opens for us.
Try to drag and drop the voting box after running the demo...cool isn't it. This nice feature is implemented by using only JavaScript and DOM but it is still included in the Ajax scope. The files implementing that feature are genlibsubset_draggable.js and draggable.js in your ROOT library of the web server. In order to use them we only included them in the html file and defined the area to be dragged.

Detailed code explanations for the demo files can be found in the Demo part of the PowerPoint presentation linked above.
Welcome to the Ajax Web Development Way!