You are on page 1of 3

AJAX

Details Covered:

What is AJAX?
Advantages
Where does it fit in to CWS Bureau Holding Area application?
Context Sensitive Help
Search Filter
Very Responsive Solution with Ajax - "Auto-Complete".
Popular Example from Google.
Locking
Nice to have feature with AJAX
Hands On
Sample Application

Details:

1. What is AJAX?

AJAX, short for Asynchronous JavaScript And XML, isn't a technology but rather
a grouping of technologies. AJAX uses a communication technology (typically
SOAP and XML) to send and receive an asynchronous request/response to the
server, and then leverages presentation technologies (JavaScript, DOM, HTML,
and CSS) to process the response.

Actually, it executes a server-side method through a JavaScript call,


without requiring a browser refresh. This is some thing like a mini
request/response that happens behind the scenes from the user.

Advantages

Traditionally, a response to a user's input could only be retrieved by


submitting a new request to the Web server. In some cases, developers could
load all responses on the client (using JavaScript) and provide a better user
experience. A common example of this technique is to dynamically load a list
of states or provinces, based on a selected country. Unfortunately, in many
cases, neither posting back nor loading everything into JavaScript felt correct.
Either posting back created too much of a UI disconnect, or an unmanageable
amount of data was required on the client (which often resulted in less-
than-readable JavaScript). AJAX provides a new in-between
alternative, capable of leveraging the server-based application while
maintaining a esponsive feel.

It provides an easy maintenance of the Application.

It improves the usability of the website drastically by creating more


responsiveinterfaces.
The complexity and hardness in writing, testing, debugging JavaScript is no
more required for implementing a responsive interface.

2. Where does it fit in to CWS Bureau Holding Area?

2.1 Context Sensitive Help

Current Approach Ajax Approach


1. When the user clicks on a field, the page should be 1. When the User clicks on a field, a server
posted back to retrieve the corresponding help text side method call will be made to retrieve
from an xml file\Cache object and the help text should the help text from an xml file\Cache
be set. objectand would be set with out refreshing
or posting the page to the server.
2. Load all the help text in to the webpage at client side
and extract the required help text through Java Script
functions when the user click on a screen element\field.

2.2 Search Filter

The requirement A.50.10.20 says that "The search should operate on an


exact match and on a ‘starts with‘ basis where items are returned if they start
with the character string entered in the search criteria field."

Very Responsive Solution with Ajax - "Auto-Complete".

Auto-Complete behave much like the auto-complete feature of IE and many


other desktop applications. It takes the user's partial input as he or she is
typing it and queries the database result for matching results, presenting
these results to the user. This allows the user to partially type a word and
select from a list of possible choices. As the page does not get refreshed,
it appears to the user as if the results are retrieved from the local
box.

Popular Example from Google.

Please go through the Google implementation of AJAX for the above feature at
the following link for better clarity.

http://www.google.com/webhp?complete=1&hl=en

We can also perform a Select distinct operation on the database and


stored the
results in Cache to avoid the database call frequently and provide faster
response. The Cache could be refreshed on a pre determined basis.
2.3 Locking

The requirement A.50.20.35 and A.50.20.40 says that:

A.50.20.35

When a detail item is opened it should be locked to prevent two users


accessing a
message at the same time.

A.50.20.40

When attempting to open a locked message/advice the user should be advised


that
the message is locked and given the name of the user locking the message.

A Nice to have feature easily possible for the above requirements with
AJAX.

When the user selects a record in the Summary page that is being viewed by
another user we display a message to the user saying that it is locked. This
message could be displayed in the Context Sensitive Help section or by using a
DIV tag. All the records that are requested by the current user, but being used
by other users will be queued for the current user. We could use a polling
system to see if any queued documents are available. Basically, this means
we'll keep calling the server-side method through AJAX, with a delay, and
display the results. The whole logic for implementing this could be placed in a
User Control and this could be placed in all the required pages.

3. Hands On

Sample Application

A sample application that implements Context Sensitive Help is attached. The


application is mainly meant for testing the AJAX usage, so it does not follow any
standards or efficient ways of doing the same. It has just got a single webpage
containing only the header\filter part. When the user clicks on the field name, it
makes a call to the server method through AJAX with out refreshing the page
and provide a message box with the help text.

You might also like