AJaX
Asynchronous Javascript and
XML
-implementation under Java-
By:
Mohamed Ennahdi El Idrissi
Introduction
When I heard the first time about
AJaX technology, my whole attention
was dedicated to my end of studies
project, using MicroSoft .NET
technologies;
I couldn’t discover much about AJaX
under VisualStudio .NET 2005, since
you can’t find out what’s inside each
control;
Introduction
After successfully presenting my project
that allowed me to get my Bachelor
Degree, I decided to focus on Java
technologies;
I don’t regret this choice, since there are
more challenging goals to reach, you have
to rely on yourself to make everything
work;
Java platform doesn’t require advanced
Operation System options to function
normally.
Me & AJaX
I learnt about many frameworks, but
AJaX was still mysterious to me;
Yes, AJaX decreases resources
consumption, but that’s a general
definition, so the question is: What
are the absolute needs that caused
the birth of AJaX?
Me & AJaX
I launched an online research,
wondering about how I could
understand and implement AJaX;
Examples and Implementations are
my favorite choice to understand
concepts and theories, I guess.
Me & AJaX
I discovered an interesting link
online, simple and efficient;
Unfortunately, it’s not available
anymore. But I found someone
discussing it in a forum;
Beside the XML part, I could
understand AJaX (Asynchronous
Javascript, the XML part remains
mysterious.
Me & AJaX
Asynchronous Javascript means you
can call a javascript function to
execute a Server Side code in parallel
with other processes.
XML, I think, is related to the result
of the operation described above
I will try to extract a personalized
case to have a suitable explanation of
AJaX
Me & AJaX
This example, allowed me to
understand AJaX, the mechanism, the
concept.
In summary, AJaX allows developers
to take advantage of the Server Side
code to be executed as a Client Side
code.
Me & AJaX
This can be possible, when you gather the
necessary tools:
Server Side code (Java, web server…)
Client Side code (Javascript)
Web Browser supporting AJaX characteristics.
You might wonder, where’s the Java in
here, the truth is that AJaX is absolutely
independent from any server side
technology
Harmony between the client side and the
server side is all what matters with AJaX
The Concept
1. When you load an HTML page, you
fill different controls and text zones.
2. Next, you click on the button, it will
trigger a Client Side code operation.
3. This operation implements a Server
Side code
4. The Server Side code is a servlet, for
instance (or a JSP with scriptlet code
only)
The Concept
1. The servlet is executed in the
background and returns results;
2. Results are sent back to the Client
Side code;
3. The calling HTML page shows the
result rendered by the Client Side
Code;
The Concept
You can notice that AJaX’s concept is
the most relevant actor in this
manipulation
AJaX utilities are pretty handy only
when it’s about the Client Side result
For me, the whole AJaX architecture
implemented from the request till the
response is to make its interactions
sure and modern
Client Side Server Side
Web Server
Javascript
Client Side Code
Background Execution
2- Asynchronous Invocation
6- Checking response state
7- Decoding results
Server Side Code
HTML Page 3- Extracting sent data
1- Filling
4- Performing operations
5- Encoding results (XML response)
Servlet or (JSP)
Implementation
I am going to illustrate an example of
AJaX, inspired from the simple online
exam I mentioned earlier;
This example, is a web project which
includes:
a JSP
a javascript source file
a Servlet
JSP
The JSP will contain a text box and a
button.
– A button will launch a background
server side script to retrieve a
random integer.
– And the text box will display the
result of this script
Javascript
The javascript source file regroups
the functions required to handle the
client side process
the AJaX utilities including the
send/receive interactions
Servlet
When executed, the Servlet:
generates a random integer
formats it inside an XML tag
sends it back to the caller (jsp page)
JSP
JSP
Javascript
Servlet
Example’s Anatomy
When clicking on the button, the first
process to be executed is the function
so called generateRandomValue()
The main actor, as you can notice, is
the global “variable” object http;
This object, http, was initialized with
the XMLHttpRequest object (when
using Mozilla FireFox, ActiveXObject
when using IE);
Example’s Anatomy
The http object’s method open, as you may see, takes
3 parameters:
method of the request (Get / Post)
target element (a Servlet in our case, but usually JSP)
true for asynchronous / false for synchronous
The http object’s property onreadystatechange,
receives a function (notice that brackets absent when
calling the function)
Any function affected to the onreadystatechange
property shouldn’t have any parameter defined
This function is responsible for handling the server
side response
Example’s Anatomy
The http object’s method send, takes
a unique parameter: a string that
contains form values sent when the
method is Post. If so, each value has
to be separated by a “&”;
In our example, we used a Get
method, with no values to be sent;
Example’s Anatomy
The http object’s property readyState takes
five different values:
0: not initialized
1: connection established
2: request received
3: answer in process
4: finished
the response, can’t be treated by the client
side until the server side script responds,
that’s when readyState takes the value ‘4’
Example’s Anatomy
The http object’s property status
takes different codes:
200: Everything is OK
401: Unauthorized
403: Forbidden
404: Not Found
Those are standard HTTP codes that
always existed on the Web
Example’s Anatomy
The http object’s property
responseXML carries the value
returned by the Server Side script;
To retrieve the sent data, you have to
indicates the tag name (case
sensitive);
A strict coordination between the
Server Side and the Client Side XML
tag naming is vital.
Standard XMLHttpRequest
–Properties –
Property Description
onreadystatechange Event handler that fires at every state
change.
readyState The state of the request as follows:
0= uninitialized
1= loading
2= loaded
3= interactive
4= complete
responseText The response from the server as a string.
responseXML The response from the server as an XML
document object.
status The HTTP status code from the server.
statusText The textual version of the HTTP status code.
Standard XMLHttpRequest
–Methods –
Method Description
abort() Aborts the current request.
getAllResponseHeaders() Returns all the response headers for the HTTP
request as a string.
getResponseHeader( Returns the value of the specified header as a
headerName:string) string.
open(method:string, URL:string, [, Opens the connection with the server. The
asyncFlag:Boolean [, userName:string [, method parameter can be either "GET", "POST",
password:string]]]) or "PUT". The URL can be relative or absolute.
The async parameter indicates whether the
request should be handler asynchronously.
send(content:string) Dispatches the request to the server, optionally
with postable string or DOM object data.
setRequestHeader(label:string, Adds a label/value pair to the HTTP header to be
value:string) sent.
Conclusion
To acquire a simple AJaX
understanding is a gate toward a new
generation of the web development;
This presentation allowed me to
validate my knowledge about AJaX
And I hope it’d be a consistent
contribution for anyone eager to learn
and discover AJaX
References
http://www.xul.fr/en-xml-ajax.html
http://dereklawless.ie/articles/an-introduction-to-ajax/
