Ajax and Web 2.

0 Related
Frameworks and toolkits

Tao Michael Li
Technology Evangelist
Sun Microsystems, Inc.

11
Agenda
• AJAX Basics
> AJAX Interaction:Using Sample Application
• AJAX Toolkits and Frameworks
> Dojo Client-side JavaScript Library
> jMaki
> AJAX-enabled JavaServer Faces
> Wicket
> Google Web Toolkit
> Direct Web Remoting
AJAX Basics:
What is AJAX?
What is AJAX?
• AJAX= acronym for:
> Asynchronous JavaScript and XML
• Browser client uses JavaScript to Asynchronously
get XML data from a server and update page
dynamically without refreshing the whole page
User Interface: Traditional Web vs.
AJAX User operation
01100110
01111001
01101011
stops while
Stateless
Synchronous call
the data is being
HTML View Stateful
Server fetched
Browser
New HTML page
011001101101
111110010100
011010111101
110011010110

AJAX 0110 No interruption in user interface display

0111
Only new information updated on page
Asynchronous call
Events Stateful
handled JavaScript™ UI Stateless
locally Server
Browser
Data only, not HTML
0110
1001
1011
Traditional Web AJAX
within a browser,
there is AJAX engine
AJAX Basics:
AJAX Interaction:
Sample Application
Anatomy of an AJAX Interaction
Data Validation Example
1. A Client event occurs
• A JavaScript function is called as the result of an
event
• Example: validateUserId() JavaScript function is
event handler to a onkeyup event on input form field
with id = “userid”

<input type="text"
size="20"
id="userid"
name="id"
onkeyup="validateUserId();">
Anatomy of an AJAX Interaction
Data Validation Example
2. An XMLHttpRequest object is created
var req;
function initRequest() {
if (window.XMLHttpRequest) {
req = new XMLHttpRequest(); XMLHttpRequest
} else if (window.ActiveXObject) { created
isIE = true;
req = new ActiveXObject("Microsoft.XMLHTTP");
}
}

function validateUserId() {
initRequest();
req.onreadystatechange = processRequest;
if (!target) target = document.getElementById("userid");
var url = "validate?id=" + escape(target.value);
req.open("GET", url, true);
req.send(null);
}
 2. An XMLHttpRequest object is
configured (cont.)
var req;
function initRequest() {
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
} else if (window.ActiveXObject) { Set Callback function
isIE = true;
req = new ActiveXObject("Microsoft.XMLHTTP");
}
}

function validateUserId() {
initRequest();
req.onreadystatechange = callBack;
if (!target) target = document.getElementById("userid");
var url = "validate?id=" + escape(target.value);
req.open("GET", url, true);
req.send(null);
}
Anatomy of an AJAX Interaction
Data Validation Example
3. XMLHttpRequest object makes an
asynchronous request
function initRequest() {
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
} else if (window.ActiveXObject) {
isIE = true;
req = new ActiveXObject("Microsoft.XMLHTTP");
}
} requested URL is set
function validateUserId() {
initRequest();
req.onreadystatechange = processRequest;
if (!target) target = document.getElementById("userid");
var url = "validate?id=" + escape(target.value);
req.open("GET", url, true);
req.send(null);
} Make request to url asynchronously
Anatomy of an AJAX Interaction
Data Validation Example
4. Server component process request

public class ValidateServlet extends HttpServlet {

...
public void doGet(HttpServletRequest request, HttpServletResponse
response) throws IOException, ServletException {
String targetId = request.getParameter("id");
String isValid =null;
if ((targetId != null) && !accounts.containsKey(targetId.trim())) {
isValid="true";
} else {
isValid="false";
}
}
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
response.getWriter().write("<message>" + isValid + "</message>");
}
}
Anatomy of an AJAX Interaction
Data Validation Example
5. Server component return the result

public class ValidateServlet extends HttpServlet {

...
public void doGet(HttpServletRequest request, HttpServletResponse
response) throws IOException, ServletException {
String targetId = request.getParameter("id");
String isValid =null;
if ((targetId != null) && !accounts.containsKey(targetId.trim())) {
isValid="true";
} else {
isValid="false"; Content type text/xml
}
}
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
response.getWriter().write("<message>" + isValid + "</message>");
}
} Cache-control must be no-cache
Anatomy of an AJAX Interaction
Data Validation Example
 6. The XMLHttpRequest object calls the
callback() function and processes the result
The XMLHttpRequest object calls the callBack()
function when there is a state change. readyState
==4 and status==200 mean the request is
successful.
function callBack() { 4= complete
if (req.readyState == 4) {
if (req.status == 200) { 200 = ok
var isValid= responseXML.getElementsByTagName("message")[0].firstChild.data;
setMessage(isValid);
}
} response
}
message= “<message>true</message>”
Anatomy of an AJAX Interaction
Data Validation Example
7. The HTML DOM is updated dynamically
<script type="text/javascript">

function setMessage(isValid) {
var mdiv = document.getElementById("userIdMessage");
if (isValid == "true") {
mdiv.innerHTML = "<div style=\"color:green\">Valid User Id</ div>";
} else {
mdiv.innerHTML = "<div style=\"color:red\">Invalid User Id</ div>";
}
}
</script>
<body>
<div id="userIdMessage"></div>
</body>
Current Issues with AJAX
• JavaScript
> inconsistent support among browsers
> requires cross browser testing
> code is visible to a hacker
> Can be difficult to develop, debug, and maintain
> automatic testing is hard
AJAX Toolkits and
Frameworks :
Dojo Client Side
JavaScript Library
What is Dojo Toolkit?
• Open Source set of JavaScript libraries
• Simplifies adding AJAX into web pages!
• Major industry support (Sun, IBM, AOL)
• http://dojotoolkit.com/
• Server side technology independent

source: dojotoolkit.org
Dojo Toolkit Libraries
• dojo.io: AJAX-based
communication with the
server
• dojo.event: unified event
system
• dojo.widget Widget
framework
• dojo.dom: DOM manipulation
routines
• string, json: utility routines to
make JavaScript easier to
use.
Dojo Pro's And Con's
• Pro's
> You can use it with any server side technology
> Make Ajax easier, takes care of browser problems
> Can mix with other Javascript frameworks
• Con's
> Developer still has to learn some JavaScript
AJAX Toolkits and
Frameworks :
jMaki
What is jMaki
• jMaki is a lightweight AJAX Framework
> Make javascript accessible to JSP, JSF, PHP,
Ruby/JRuby and Phobos
• “AJAX” in a tag
• Widget model
> Leveraging popular toolkits: dojo, Yahoo, Google,
Scriptaculous, ...
• Layout
• Server Model
> Mashup with outside services
Publish/Subscribe

• A means for one or more Project jMaki widgets to

communicate with each other in a page
using topics
• Publish/Subscribe is much like a server-side
messaging system by it runs in the scope of an
HTML page

https://ajax.dev.java.net/publishsubscribe.html
Publish Example

icon.onClick = function (){

jmaki.publish("/dojo/fisheye", this);
}
 Subscribe Example
<script>
function fisheyeListener(item) {
var targetDiv = document.getElementById("newpage");
var responseText = "";
var index = Number(item.index);
switch(index){
case 1: // Set responseText equal to Jayashri's bio
break;
case 2: // Set responseText equal to Roberto's bio
default: responseText += 'Click on one of the photos above';
break;
}
targetDiv.innerHTML = responseText;
}
jmaki.subscribe("/dojo/fisheye", fisheyeListener);
</script>
jMaki Demo
jMaki Pro’s and Con’s
• Pro’s
> Works in different platforms/language
> Can be incorporated in existing application
• Con’s
> still need to know javascript
AJAX Toolkits and
Frameworks :
AJAX-Enabled
JavaServer Faces
AJAX enabled Java Server Faces
• JSF is Component based
• AJAX details hidden inside the components
> component provider will provide the details
• Dynamic Faces (DynaFaces)
> Incremental improvement to JSF 1.2
> Extended life cycle – Shale remoting
• Developer entry points
> Page
> Components
Demo DynaFaces with NetBeans
VWP
Pro's And Con's
• Pro's
> Drag-and-dropping AJAX-enabled JavaServer Faces
components within an IDE for building AJAX application
> Page authors do not need to know JavaScript
> Can take advantage of JSF features (rich framework)
• Con's
> programming AJAX-enabled JavaServer Faces
components is not easy.
AJAX Toolkits and
Frameworks :
Wicket
What is wicket?
• Wicket is a Java Web framework
> based on servlet
> component based like JSF but simpler than JSF
> Wicket components are just HTML tag with wicket attribute
> i.e. <input wicket:id=”userInput” />, <p wicket:id=”title”>...</p>
> POJO data model
• Wicket recipe: desktop GUI like programming
> create a HTML page
> put components on the page
> Define how each component reacts to user input
• Most recent version 1.3
Wicket for AJAX
• Takes “J”(Javascript) and “X”(xml) out of AJAX
> pure HTML + Java
• Make web development easy for Java developers
• Easy to separate presentation and logic
Wicket Demo
Pro's And Con's
• Pro's
> No JavaScript, no XML, pure HTML + Java
> Great for Java developers
> Active community
• Con's
> HTML template tightly coupled with Java
> The Wicket way – everything done in Java
> Good for Java developers, but not web developers
AJAX Toolkits and
Frameworks :

Google Web Toolkit

What is GWT (Google Web Toolkit)?
• Build AJAX apps with Java technology
> Take out “J”(Javascript) from AJAX
• Provides:
> Java-to-JavaScript compiler:
>Develop in Java
>At deploy time the compiler translates your Java
application to browser-compliant JavaScript and HTML
> special web browser for debugging GWT applications
GWT Demo
Pro's And Con's
• Pro's
> Allows Java developers to use Java language for the
development AJAX applications
> No need to learn JavaScript language
> It is from Google (Good momentum)
• Con's
> <work in progress>
• When to use
> When you prefer using Java for GUI
AJAX Toolkits and
Frameworks :

Direct Web Remoting:

DWR
What is DWR?
• Make Server side Java objects available to client as
javascript call.
• Framework generates client stub dynamically, which
is a JavaScript code
• Client stub (Proxy) handles marshalling of
parameters and return value
• https://dwr.dev.java.net/
DWR Demo
Pro's And Con's
• Pro's
> Allows you to expose existing backend business logic to
AJAX client with minimum work
> Allows you to use familiar RMI like syntax in the client
side JavaScript code
• Con's
> Hackers can see what backend methods are available
> Custom converter (mashaller and unmarshaller) needs to
be created for custom Java objects
• When to use
> When you want to expose existing backend business
logic to AJAX client using underlying framework
Summary &
Resources
Summary
• AJAX helps make applications more interactive
> But AJAX does not come for free
> Start small and don’t overdo it
> Choose the right Toolkits and Frameworks for your
application
 For More Information
• The BluePrints Solutions catalog on AJAX:
> https://bpcatalog.dev.java.net/nonav/solutions.html
• AJAX Q & A
> https://blueprints.dev.java.net/ajax-faq.html
• Asynchronous JavaScript Technology and XML (AJAX)
With Java 2 Platform, Enterprise Edition
> http://java.sun.com/developer/technicalArticles/J2EE/AJAX/inde
x.html
• AJAX Frameworks
> http://ajaxpatterns.org/wiki/index.php?title=AJAXFrameworks
• AJAX Library and Frameworks Comparison
> http://wiki.osafoundation.org/bin/view/Projects/AjaxLibraries
• AJAX Developer Resource Center
> http://developers.sun.com/ajax/
• JavaScript Developer Site
> java.sun.com/javascript
Ajax and Web 2.0 Related
Frameworks and toolkits

Tao Michael Li
Technology Evangelist
Sun Microsystems, Inc.

57
57