Asynchronous Javascript and XML - Java Implementation
Transcript of 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
-
8/14/2019 Asynchronous Javascript and XML - Java Implementation
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;
-
8/14/2019 Asynchronous Javascript and XML - Java Implementation
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.
-
8/14/2019 Asynchronous Javascript and XML - Java Implementation
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?
-
8/14/2019 Asynchronous Javascript and XML - Java Implementation
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.
-
8/14/2019 Asynchronous Javascript and XML - Java Implementation
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.
-
8/14/2019 Asynchronous Javascript and XML - Java Implementation
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/14/2019 Asynchronous Javascript and XML - Java Implementation
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.
-
8/14/2019 Asynchronous Javascript and XML - Java Implementation
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
-
8/14/2019 Asynchronous Javascript and XML - Java Implementation
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)
-
8/14/2019 Asynchronous Javascript and XML - Java Implementation
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;
-
8/14/2019 Asynchronous Javascript and XML - Java Implementation
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
-
8/14/2019 Asynchronous Javascript and XML - Java Implementation
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)
-
8/14/2019 Asynchronous Javascript and XML - Java Implementation
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
-
8/14/2019 Asynchronous Javascript and XML - Java Implementation
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
-
8/14/2019 Asynchronous Javascript and XML - Java Implementation
16/31
Javascript
The javascript source file regroups the functions required to handle the
client side process
the AJaX utilities including thesend/receive interactions
-
8/14/2019 Asynchronous Javascript and XML - Java Implementation
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)
-
8/14/2019 Asynchronous Javascript and XML - Java Implementation
18/31
JSP
-
8/14/2019 Asynchronous Javascript and XML - Java Implementation
19/31
-
8/14/2019 Asynchronous Javascript and XML - Java Implementation
20/31
Javascript
-
8/14/2019 Asynchronous Javascript and XML - Java Implementation
21/31
Servlet
-
8/14/2019 Asynchronous Javascript and XML - Java Implementation
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);
-
8/14/2019 Asynchronous Javascript and XML - Java Implementation
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
-
8/14/2019 Asynchronous Javascript and XML - Java Implementation
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;
-
8/14/2019 Asynchronous Javascript and XML - Java Implementation
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
-
8/14/2019 Asynchronous Javascript and XML - Java Implementation
26/31
-
8/14/2019 Asynchronous Javascript and XML - Java Implementation
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.
-
8/14/2019 Asynchronous Javascript and XML - Java Implementation
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.
-
8/14/2019 Asynchronous Javascript and XML - Java Implementation
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.
-
8/14/2019 Asynchronous Javascript and XML - Java Implementation
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
-
8/14/2019 Asynchronous Javascript and XML - Java Implementation
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