Asynchronous Javascript and XML - Java Implementation

8/14/2019 Asynchronous Javascript and XML - Java Implementation

1/31

AJaX

Asynchronous Javascript andXML-implementation under Java-

By:Mohamed Ennahdi El Idrissi


2/31

Introduction

When I heard the first time aboutAJaX technology, my whole attentionwas dedicated to my end of studiesproject, using MicroSoft .NETtechnologies;

I couldnt discover much about AJaX

under VisualStudio .NET 2005, sinceyou cant find out whats inside eachcontrol;


3/31

Introduction

After successfully presenting my projectthat allowed me to get my BachelorDegree, I decided to focus on Java

technologies; I dont regret this choice, since there are

more challenging goals to reach, you haveto rely on yourself to make everything

work; Java platform doesnt require advanced

Operation System options to functionnormally.


4/31

Me & AJaX

I learnt about many frameworks, butAJaX was still mysterious to me;

Yes, AJaX decreases resourcesconsumption, but thats a generaldefinition, so the question is: Whatare the absolute needs that caused

the birth of AJaX?


5/31

Me & AJaX

I launched an online research,wondering about how I couldunderstand and implement AJaX;

Examples and Implementations aremy favorite choice to understandconcepts and theories, I guess.


6/31

Me & AJaX

I discovered an interesting linkonline, simple and efficient;

Unfortunately, its not availableanymore. But I found someonediscussing it in a forum;

Beside theXML part, I could

understand AJaX (AsynchronousJavascript, theXML part remainsmysterious.


7/31

Me & AJaX

Asynchronous Javascriptmeans youcan call a javascript function toexecute a Server Side code in parallelwith other processes.

XML, I think, is related to the resultof the operation described above

I will try to extract a personalizedcase to have a suitable explanation ofAJaX


8/31

Me & AJaX

This example, allowed me tounderstand AJaX, the mechanism, theconcept.

In summary, AJaX allows developersto take advantage of the Server Sidecode to be executed as a Client Side

code.


9/31

Me & AJaX

This can be possible, when you gather thenecessary tools: Server Side code (Java, web server)

Client Side code (Javascript) Web Browser supporting AJaX characteristics.

You might wonder, wheres the Java inhere, the truth is that AJaX is absolutelyindependent from any server sidetechnology

Harmony between the client side and theserver side is all what matters with AJaX


10/31

The Concept

1. When you load an HTML page, youfill 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, forinstance (or a JSP with scriptlet codeonly)


11/31

The Concept

1. The servlet is executed in thebackground and returns results;

2. Results are sent back to the ClientSide code;

3. The calling HTML page shows theresult rendered by the Client Side

Code;


12/31

The Concept

You can notice that AJaXs concept isthe most relevant actor in thismanipulation

AJaX utilities are pretty handy onlywhen its about the Client Side result

For me, the whole AJaX architecture

implemented from the request till theresponse is to make its interactionssure and modern


13/31

HTML Page

Client Side Code

Server Side Code

Client Side Server Side

Javascript

1- Filling

Servlet or (JSP)

Background Execution

W

ebServer

2- Asynchronous Invocation

6- Checking response state7- Decoding results

3- Extracting sent data

4- Performing operations

5- Encoding results (XML response)


14/31

Implementation

I am going to illustrate an example ofAJaX, inspired from the simple onlineexam I mentioned earlier;

This example, is a web project whichincludes: a JSP a javascript source file a Servlet


15/31

JSP

The JSP will contain a text box and abutton.

A button will launch a backgroundserver side script to retrieve arandom integer.

And the text box will display the

result of this script


16/31

Javascript

The javascript source file regroups the functions required to handle the

client side process

the AJaX utilities including thesend/receive interactions


17/31

Servlet

When executed, the Servlet: generates a random integer

formats it inside an XML tag

sends it back to the caller (jsp page)


18/31

JSP


19/31


20/31

Javascript


21/31

Servlet


22/31

Examples Anatomy

When clicking on the button, the firstprocess to be executed is the functionso called generateRandomValue()

The main actor, as you can notice, isthe global variable object http;

This object, http, was initialized with

the XMLHttpRequest object (whenusing Mozilla FireFox, ActiveXObjectwhen using IE);


23/31

Examples Anatomy

The http objects method open, as you may see, takes3 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 objects property onreadystatechange,

receives a function (notice that brackets absent whencalling the function)

Any function affected to the onreadystatechange

property shouldnt have any parameter defined This function is responsible for handling the server

side response


24/31

Examples Anatomy

The http objects method send, takesa unique parameter: a string thatcontains form values sent when themethod is Post. If so, each value hasto be separated by a &;

In our example, we used a Get

method, with no values to be sent;


25/31

Examples Anatomy

The http objects property readyState takesfive different values: 0: not initialized 1: connection established 2: request received 3: answer in process 4: finished

the response, cant be treated by the clientside until the server side script responds,thats when readyState takes the value 4


26/31


27/31

Examples Anatomy

The http objects propertyresponseXML carries the valuereturned by the Server Side script;

To retrieve the sent data, you have toindicates the tag name (casesensitive);

A strict coordination between theServer Side and the Client Side XMLtag naming is vital.


28/31

Standard XMLHttpRequestProperties

Property Description

onreadystatechange Event handler that fires at every state

change.

readyState The state of the request as follows:

0 = uninitialized1 = 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.


29/31

Standard XMLHttpRequestMethods

Method Description

abort() Aborts the current request.

getAllResponseHeaders() Returns all the response headers for the HTTP

request as a string.getResponseHeader(

headerName:string)

Returns the value of the specified header as a

string.

open(method:string, URL:string, [,

asyncFlag:Boolean [, userName:string [,

password:string]]])

Opens the connection with the server. The

method parameter can be either "GET", "POST",

or "PUT". The URL can be relative or absolute.

The async parameter indicates whether therequest should be handler asynchronously.

send(content:string) Dispatches the request to the server, optionally

with postable string or DOM object data.

setRequestHeader(label:string,

value:string)

Adds a label/value pair to the HTTP header to be

sent.


30/31

Conclusion

To acquire a simple AJaXunderstanding is a gate toward a newgeneration of the web development;

This presentation allowed me tovalidate my knowledge about AJaX

And I hope itd be a consistentcontribution for anyone eager to learnand discover AJaX


31/31

References

http://www.xul.fr/en-xml-ajax.html

http://dereklawless.ie/articles/an-introduction-to-ajax
http://www.xul.fr/en-xml-ajax.htmlhttp://dereklawless.ie/articles/an-introduction-to-ajax/http://dereklawless.ie/articles/an-introduction-to-ajax/http://www.xul.fr/en-xml-ajax.html

Asynchronous Javascript and XML - Java Implementation

Documents

Transcript of Asynchronous Javascript and XML - Java Implementation