Ajax

Introduction to Ajax
Sang Shin Java Technology Architect Sun Microsystems, Inc. sang.shin@sun.com www.javapassion.com
Agenda
1.What is Rich User Experience? 2.Rich Internet Application (RIA) Technologies 3.AJAX: Real-life examples & Usage cases 4.What is and Why AJAX? 5.Technologies used in AJAX 6.Anatomy of AJAX operation 7.XMLHttpRequest Methods & Properties 8.DOM APIs & InnerHTML 9.AJAX Security 10.JavaScript debugging tools
2
Topics Covered in Other Presentations

AJAX Toolkits & Frameworks JSON (JavaScript Object Notation) Dojo Toolkit DWR (Direct Web Remoting) AJAX-enabled JSF Components Google Web Toolkit (GWT) jMaki Phobos (MVC-based server-side scripting) Ajax and Portlet/Portal Wicket and Shale (as AJAX-aware Web applicaion frameworks) JavaScript Programming Best Practices
1. Rich User Experience for Web Application
Rich User Experience

Take a look at a typical desktop application (Spreadsheet app, etc.) The program responses intuitively and quickly The program gives a user meaningful feedback's instantly
> A cell in a spreadsheet changes color when you hover your
mouse over it > Icons light up as mouse hovers them
Things happen naturally

> No need to click a button or a link to trigger an event
Characteristics of Conventional Web Applications (Apps without Ajax)

Click, wait, and refresh user interaction
> Any communication with the server forces a page refresh
Synchronous request/response communication model

> The user has to wait for the response
Page-driven: Workflow is based on pages

> Page-navigation logic is determined by the server
Issues of Conventional Web Application

Interruption of user operation
> Users cannot perform any operation while waiting for a response
Loss of operational context during refresh

> Loss of information on the screen > Loss of scrolled position
No instant feedback's to user activities

> A user has to wait for the next page
Constrained by HTML
> Lack of useful widgets
These are the reasons why Rich Internet Application (RIA) technologies were born. 7
2. Rich Internet Application (RIA) Technologies
Rich Internet Application (RIA) Technologies

Applet Macromedia Flash/Air Java WebStart DHTML DHTML with Hidden IFrame Ajax Sliverlight (Windows only) JavaFX (Java Platform)
Applet
Pros:
> Can use full Java APIs > Custom data streaming, graphic manipulation, threading, and
advanced GUIs > Well-established scheme
Cons:
> Code downloading time could be significant > Reliability concern - a mal-functioning applet can crash a
browser
There is renewed interest in applet, however, as a RIA technology with Java SE 10 Update 10
> Solves old applet problems
10
Macromedia Flash
Designed for playing interactive movies originally Programmed with ActionScript Implementation examples
> Macromedia Flex > Laszlo suite (open source)
Pros:
> Good for displaying vector graphics
Cons:
> Browser needs a Flash plug-in > ActionScript is proprietary
11
Java WebStart
Desktop application delivered over the net
> Leverages the strengths of desktop apps and applet
Pros
> > > > >
Desktop experience once loaded Leverages Java technology to its fullest extent Disconnected operation is possible Application can be digitally signed Incremental redeployment
Cons
> Old JRE-based system do not work > First-time download time could be still significant
12
DHTML (Dynamic HTML)

DHTML = JavaScript + DOM + CSS Used for creating interactive applications No asynchronous communication, however
> Full page refresh still required > Reason why it has only a limited success
13
DHTML with Hidden IFrame

IFrame was introduced as a programmable layout to a web page
> An IFrame is represented as an element of a DOM tree > You can move it, resize it, even hide it while the page is
visible
An hidden IFrame can add asynchronous behavior

> The visible user experience is uninterrupted operational
context is not lost
It is still a hack
14
AJAX
DHTML plus Asynchronous communication capability through XMLHttpRequest Pros
> > > >
Emerges as a viable RIA technology Good industry momentum Several toolkits and frameworks are emerging No need to download code & no plug-in required
Cons
> Still some browser incompatibility > JavaScript is hard to maintain and debug
AJAX-enabled JSF components will help
15
3. AJAX: Real-life Examples & Usecases
Real-Life Examples of AJAX Apps

Google maps
> http://maps.google.com/
Goolgle Suggest
> http://www.google.com/webhp?complete=1&hl=en
NetFlix
> http://www.netflix.com/BrowseSelection?lnkctr=nmhbs
Gmail
> http://gmail.com/
Yahoo Maps (new)

> http://maps.yahoo.com/
Many more are popping everywhere
17
AJAX: Demo Google Maps, Yahoo Maps New
Key Aspects of Google Maps

A user can drag the entire map by using the mouse
> Instead of clicking on a button or something > The action that triggers the download of new map data is not
a specific click on a link but a moving the map around with a mouse
Behind the scene - AJAX is used

> The map data is requested and downloaded asynchronously
in the background
Other parts of the page remains the same

> No loss of operational context
19
Usage cases for AJAX

Real-time server-side input form data validation
> User IDs, serial numbers, postal codes > Removes the need to have validation logic at both client side
for user responsiveness and at server side for security and other reasons
Auto-completion
> Email address, name, or city name may be auto-completed as
the user types
Master detail operation

> Based on a user selection, more detailed information can be
fetched and displayed
20

Advanced GUI widgets and controls
> Controls such as tree controls, menus, and progress bars
may be provided that do not require page refreshes
Refreshing data
> HTML pages may poll data from a server for up-to-date data
such as scores, stock quotes, weather, or application-specific data
21
Demo: AJAX Sample Apps javapassion.com/handsonlab s/ajaxbasics2/#Exercise_1
Demo Scenario
Run sample AJAX applications within NetBeans IDE
> Auto completion > Data validation > Progress bar
You can try this demo yourself

> These applications are provided as part of the hands-on lab. > www.javapassion.com/handsonlabs/4257_ajaxbasics2.zip
23
4. AJAX: What is and Why AJAX?
Why AJAX?
Intuitive and natural user interaction
> No clicking required > Mouse movement is a sufficient event trigger
"Partial screen update" replaces the "click, wait, and refresh" user interaction model
> Only user interface elements that contain new information are
updated asynchronously (no interruption to user operation) > The rest of the user interface remains displayed without interruption (no loss of operational context)
Data-driven (as opposed to page-driven)

> UI is handled in the client while the server provides data
25
Why AJAX?
Asynchronous communication replaces "synchronous request/response model."
> A user can continue to use the application while the client
program requests information from the server in the background > Separation of displaying from data fetching
26
Interrupted user operation while the data is being fetched
Uninterrupted user operation while data is being fetched
27
28
5. AJAX: Technologies Used in AJAX
Technologies Used In AJAX

Javascript
> Loosely typed scripting language > JavaScript function is called when an event in a page occurs > Glue for the whole AJAX operation
DOM
> Represents the structure of XML and HTML documents > API for accessing and manipulating structured documents
CSS
> Allows for a clear separation of the presentation style from the
content and may be changed programmatically by JavaScript
XMLHttpRequest
> JavaScript object that performs asynchronous interaction with the
server
30
XMLHttpRequest
JavaScript object Adopted by modern browsers
> Mozilla, Firefox, Safari, and Opera
Communicates with a server via standard HTTP GET/POST XMLHttpRequest object works in the background for performing asynchronous communication with the backend server
> Does not interrupt user operation
31
Server-Side AJAX Request Processing

Server programming model remains the same
> It receives standard HTTP GETs/POSTs > Can use Servlet, JSP, JSF, whatever web technologies...
With minor caveats

> Could have more frequent and finer-grained requests from
clients (design issue) > Response content type can be > text/xml > text/plain > text/json > text/javascript
32
6. AJAX: Anatomy Of AJAX Interaction using Data Validation Sample Application
Anatomy of an AJAX Interaction (Data Validation Example)
34
Steps of AJAX Operation

1.A client event occurs 2.An XMLHttpRequest object is created 3.The XMLHttpRequest object is configured 4.The XMLHttpRequest object makes an async. request 5.The ValidateServlet returns an XML document containing the result 6.The XMLHttpRequest object calls the callback() function and processes the result 7.The HTML DOM is updated
35
1. A Client event occurs

A JavaScript function is called as the result of an event Example: validateUserId() JavaScript function is mapped as a event handler to a onkeyup event on input form field whose id is set to userid
<input type="text" size="20" id="userid" name="id" onkeyup="validateUserId();">
36
2. An XMLHttpRequest object is created

var req; function initRequest() { if (window.XMLHttpRequest) { req = new XMLHttpRequest(); } else if (window.ActiveXObject) { 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); }
37
3. An XMLHttpRequest object is configured with a callback function

var req; function initRequest() { if (window.XMLHttpRequest) { req = new XMLHttpRequest(); } else if (window.ActiveXObject) { isIE = true; req = new ActiveXObject("Microsoft.XMLHTTP"); } } function validateUserId() { initRequest(); req.onreadystatechange = processRequest; // callback function if (!target) target = document.getElementById("userid"); var url = "validate?id=" + escape(target.value); req.open("GET", url, true); req.send(null); }
38
4. XMLHttpRequest object makes an async. request

function initRequest() { if (window.XMLHttpRequest) { req = new XMLHttpRequest(); } else if (window.ActiveXObject) { 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); } URL is set to validate?id=greg
39
5. The ValidateServlet returns an XML document containing the results (Server)

public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException { String targetId = request.getParameter("id"); if ((targetId != null) && !accounts.containsKey(targetId.trim())) { response.setContentType("text/xml"); response.setHeader("Cache-Control", "no-cache"); response.getWriter().write("<valid>true</valid>"); } else { response.setContentType("text/xml"); response.setHeader("Cache-Control", "no-cache"); response.getWriter().write("<valid>false</valid>"); } }
40
6. XMLHttpRequest object calls callback() function and processes the result The XMLHttpRequest object was configured to call the processRequest() function when there is a state change to the readyState of the XMLHttpRequest object
function processRequest() { if (req.readyState == 4) { if (req.status == 200) { var message = ...; ...
41
7. The HTML DOM is updated

JavaScript technology gets a reference to any element in a page using DOM API The recommended way to gain a reference to an element is to call
> document.getElementById("userIdMessage"), where
"userIdMessage" is the ID attribute of an element appearing in the HTML document
JavaScript technology may now be used to modify the element's attributes; modify the element's style properties; or add, remove, or modify child elements
42
1. <script type="text/javascript"> 2. function setMessageUsingDOM(message) { 3. var userMessageElement = document.getElementById("userIdMessage"); 4. var messageText; 5. if (message == "false") { 6. userMessageElement.style.color = "red"; 7. messageText = "Invalid User Id"; 8. } else { 9. userMessageElement.style.color = "green"; 10. messageText = "Valid User Id"; 11. } 12. var messageBody = document.createTextNode(messageText); 13. // if the messageBody element has been created simple replace it otherwise 14. // append the new element 15. if (userMessageElement.childNodes[0]) { 16. userMessageElement.replaceChild(messageBody, 17. userMessageElement.childNodes[0]); 18. } else { 19. userMessageElement.appendChild(messageBody); 20. } 21.} 22.</script> 23.<body> 24. <div id="userIdMessage"></div> 25.</body>
43
7. AJAX: XMLHttpRequest Methods & Properties
XMLHttpRequest Methods
open(HTTP method, URL, syn/asyn) send(content) abort()
> Assigns HTTP method, destination URL, mode > Sends request including string or DOM object data > Terminates current request > Returns headers (labels + values) as a string > Returns value of a given header
getAllResponseHeaders()
getResponseHeader(header)
setRequestHeader(label,value)
> Sets Request Headers before sending
45
XMLHttpRequest Properties
onreadystatechange
> Set with an JavaScript event handler that fires at each state
change
readyState current status of request

> 0 = uninitialized > 1 = loading > 2 = loaded > 3 = interactive (some data has been returned) > 4 = complete
status
> HTTP Status returned from server: 200 = OK
46
responseText
> String version of data returned from the server
responseXML
> XML document of data returned from the server
statusText
> Status text returned from server
47
8. AJAX: DOM API & InnerHTML
Browser and DOM

Browsers maintain an object representation of the documents being displayed
> In the form of Document Object Model (DOM) > It is readily available as document JavaScript object
APIs are available that allow JavaScript code to modify the DOM programmatically
49
DOM APIs vs. innerHTML

DOM APIs provide a means for JavaScript code to navigate/modify the content in a page
function setMessageUsingDOM(message) { var userMessageElement = document.getElementById("userIdMessage"); var messageText; if (message == "false") { userMessageElement.style.color = "red"; messageText = "Invalid User Id"; } else { userMessageElement.style.color = "green"; messageText = "Valid User Id"; } var messageBody = document.createTextNode(messageText); if (userMessageElement.childNodes[0]) { userMessageElement.replaceChild(messageBody, userMessageElement.childNodes[0]); } else { userMessageElement.appendChild(messageBody); } }
50

Using innerHTML is easier: Sets or retrieves the HTML between the start and end tags of the object
function setMessageUsingDOM(message) { var userMessageElement = document.getElementById("userIdMessage"); var messageText; if (message == "false") { userMessageElement.style.color = "red"; messageText = "Invalid User Id"; } else { userMessageElement.style.color = "green"; messageText = "Valid User Id"; } userMessageElement.innerHTML = messageText; }
51
Do I Have To Use XmlHttpRequest to Write Ajax application?
Ajax Frameworks and Toolkits

In general, you are going to use Ajax frameworks and toolkits These toolkits provide higher-level API, which hides the complexity of XmlHttpRequest
53
9. AJAX Security
AJAX Security: Server Side

AJAX-based Web applications use the same serverside security schemes of regular Web applications
> You specify authentication, authorization, and data protection
requirements in your web.xml file (declarative) or in your program (programatic)
AJAX-based Web applications are subject to the same security threats as regular Web applications
> Cross-site scripting > Injection flaw
55
AJAX Security: Client Side

JavaScript code is visible to a user/hacker
> Hacker can use the JavaScript code for inferring server side
weaknesses > Obfustication or compression can be used
JavaScript code is downloaded from the server and executed (eval) at the client
> Can compromise the client by mal-intended code
Downloaded JavaScript code is constrained by sand-box security model

> Can be relaxed for signed JavaScript
56
Recommendations from OWASP

Use .innerText instead of .innerHtml Don't use eval Encode data before its use Avoid serialization Avoid building XML dynamically
57
10. JavaScript Development Tools (Try these tools with AJAX Basics & Dev. Tools Hands-on Lab)
Development Tools for NetBeans IDE

Building AJAX Applications over NetBeans is not that much different from building regular Web applications NetBeans supports JavaScript editor and debugger
59
Development Tools on Mozilla Browser

Mozilla FireBug debugger (add-on)
> This is the most comprehensive and most useful JavaScript
debugger > This tool does things all other tools do and more
Mozilla JavaScript console Mozilla DOM inspector (comes with Firefox package) Mozilla Venkman JavaScript debugger (add-on) Mozilla LiveHTTPHeaders HTTP monitor (similar to NetBeans HTTP monitor)
60
Mozilla FireBug Debugger

Spy on XMLHttpRequest traffic JavaScript debugger for stepping through code one line at a time Inspect HTML source, computed style, events, layout and the DOM Status bar icon shows you when there is an error in a web page A console that shows errors from JavaScript and CSS Log messages from JavaScript in your web page to the console (bye bye "alert debugging") An JavaScript command line (no more "javascript:" in the URL bar)
61
11. AJAX: Current Issues & Futures
Current Issues of AJAX

Complexity is increased
> Server side developers will need to understand that
presentation logic will be required in the HTML client pages as well as in the server-side logic > Page developers must have JavaScript technology skills
AJAX-based applications can be difficult to debug, test, and maintain

> JavaScript is hard to test - automatic testing is hard > Weak modularity in JavaScript - namespace collision possible > Lack of design patterns or best practice guidelines yet
Toolkits/Frameworks still maturing

63

No standardization of the XMLHttpRequest yet
> Future version of IE will address this
No support of XMLHttpRequest in old browsers

> Iframe will help
JavaScript technology dependency & incompatibility

> Must be enabled for applications to function > Still some browser incompatibilities
JavaScript code is visible to a hacker

> Poorly designed JavaScript code can invite security problem
64
Browsers Which Support XMLHttpRequest

Mozilla Firefox 1.0 and above Netscape version 7.1 and above Apple Safari 1.2 and above. Microsoft Internet Exporer 5 and above Konqueror Opera 7.6 and above
65
AJAX Futures
AJAX-enabled JSF Component libraries Standardization of XMLHttpRequest Better browser support Better and Standardized Framework support More best practice guidelines in the programming model
66
AJAX Basics
10/08/2006
AJAX Basics
Welcome to AJAX Basics presentation. My name is Sang Shin. I am Java technology architect and evangelist from Sun Microsystems.
10/08/2006
Disclaimer & Acknowledgments

Even though Sang Shin is a full-time employee of Sun Microsystems, the contents here are created as his own personal endeavor and thus does not reflect any official stance of Sun Microsystems on any particular technology
2 Just to let you know, all the demos I will do in this presentations are from the AJAX basics and development tools hands-on lab. The hands-on lab is available from the link mentioned in the slide.
10/08/2006
Agenda
1.What is Rich User Experience? 2.Rich Internet Application (RIA) Technologies 3.AJAX: Real-life examples & Usage cases 4.What is and Why AJAX? 5.Technologies used in AJAX 6.Anatomy of AJAX operation 7.XMLHttpRequest Methods & Properties 8.DOM APIs & InnerHTML 9.AJAX Security 10.JavaScript debugging tools 11.Current issues and Future
This is the agenda of this presentation. First, I will briefly talk about what we mean by Rich User Experience from an end-user standpoint. I will then go over several Rich Internet Application technologies that make rich user experience possible when using Web applications. Then I will spend the rest of the presentation talking about AJAX in a bit more detail. First, I will show you the real-life examples and usage cases of AJAX to give you a sense of how AJAX is currently being used. Then I will talk about a little bit on what is and Why AJAX describing differences between conventional and AJAX-based web applications. Then I will spend sometime talking about the technologies that are used under AJAX-based applications - mainly JavaScript, CSS, DOM, and XMLHttpRequest JavaScript object. We will then spend some time talking about the anatomy of an AJAX operation using an example code. Here we will go over the sequence of things that occur in a typical AJAX-based interaction between a browser and the server. We will then look into the methods and properties of the XMLHttpRequest JavaScript object. We will also learn more about the XMLHttpRequest object. In the latter part of this presentation, I will touch briefly on AJAX security issues. Then I will talk about some JavaScript debugging tools for testing and debugging AJAX applications. I will end this presentations briefly mentioning the current issues of AJAX as a technology and things that will be coming in the future.
10/08/2006
Topics Covered in Other Presentations

AJAX Toolkits & Frameworks JSON (JavaScript Object Notation) Dojo Toolkit DWR (Direct Web Remoting) AJAX-enabled JSF Components Google Web Toolkit (GWT) jMaki Wicket and Shale (as AJAX-aware Web applicaion frameworks) JavaScript Programming Best Practices
4 The topics in this slide are going to be covered in other presentations. The AJAX Toolkits and Frameworks presentation covers various types of AJAX toolkits and frameworks that are available today. Then there are presentations that talks about each of these toolkits and frameworks in detail.
10/08/2006
1. Rich User Experience for Web Application
Now let's talk about rich user experience for web applications.
10/08/2006
Rich User Experience

Take a look at a typical desktop application (Spreadsheet app, etc.) The program responses intuitively and quickly The program gives a user meaningful feedback's instantly
> A cell in a spreadsheet changes color when you hover your
mouse over it > Icons light up as mouse hovers them
Things happen naturally

> No need to click a button or a link to trigger an event 6
In order to understand what we mean by rich user experience, we can take a look at a typical desktop application we use, for example, spreadsheet. When we use standalone desktop application, we expect the application to respond to what we do at the moment intuitively and quickly, giving us meaning feed-backs. For example, if you are hovering your mouse over a cell in a spreadsheet, the color of the cell might change. In using the desktop application, things happen more naturally. For example, you don't have to click a button or link to make things happen. Instead, you move your mouse around and things are responding accordingly.
10/08/2006
Characteristics of Conventional Web Applications

Click, wait, and refresh user interaction
> Page refreshes from the server needed for all events, data
submissions, and navigation
Synchronous request/response communication model

> The user has to wait for the response
Page-driven: Workflow is based on pages

> Page-navigation logic is determined by the server
So these are characteristics, rather limitations of the conventional web applications. First, in a conventional web application, a user interaction is basically a repeated sequence of click, wait and refresh cycles. In fact, a total page refresh has to occur for anything you do with the server whether it is to send a small piece of data to the server, or retrieving a small piece of data from the server. Then the user has to wait for the arrival of the response from the server. This interaction is considered synchronous in the sense that the user has to wait until a response from the server is received. Of course, we all know what it means when the network is down or slow - blank screen. The flow of conventional web application is page-driven meaning the workflow of the application is based on pages. And which page to display next is determined by the server.
10/08/2006
Issues of Conventional Web Application

Interruption of user operation
> Users cannot perform any operation while waiting for a response
Loss of operational context during refresh

> Loss of information on the screen > Loss of scrolled position
No instant feedback's to user activities

> A user has to wait for the next page
Constrained by HTML
> Lack of useful widgets
These are the reasons why Rich Internet Application (RIA) technologies were born. 8
The conventional behavior of web application we talked in the previous slide has several limitations. First of all, it is slow both in terms of actual and especially in perceived responsiveness because the user simply cannot do anything until a response is received. The second issue is loss of operational context during refresh. Because the total page has to be refreshed, in a sense your brain has to start from scratch in understanding each page. Another example is loss of scrolled position. If you have a page in which you have scrolled down, the next time the same page get refreshed, you have to scroll it down again. There is no instant feedback to user activities since the user has to wait for the response from the server. Now there have been several so called Rich Internet Application technologies that addressed some of these problems.
10/08/2006
2. Rich Internet Application (RIA) Technologies
So let's talk about Rich Internet Application (RIA) technologies.
10/08/2006
Rich Internet Application (RIA) Technologies

Applet Macromedia Flash Java WebStart DHTML DHTML with Hidden IFrame AJAX
10
This is the list of RIA technologies including AJAX. So let's go over each of these in a bit more detail.
10/08/2006
Applet
Pros:
> Can use full Java APIs > Custom data streaming, graphic manipulation, threading, and
advanced GUIs > Well-established scheme
Cons:
> Code downloading time could be significant
Use it if you are creating advanced UIs on the client and downloading time is not a major concern
11
First, let's talk about applet. Applet is Java application that gets downloaded and run within the context of a browser. Because it is a Java application, you can use full Java APIs. And there are certain things you can do such as custom data streaming, graphic manipulation, and advanced UI operations which are not possible with other RIA technologies. Applet technology has been around from the beginning of Java technology and is well understood. The downside is that code downloading time could be significant especially it has to be downloaded every time the user accesses it. So the recommendation is use applets if you are creating advanced UIs leveraging full Java APIs and code downloading time is not a major issue.
10/08/2006
Macromedia Flash
Designed for playing interactive movies Programmed with ActionScript Implementation examples
> Macromedia Flex > Laszlo suite (open source)
Pros:
> Good for displaying vector graphics
Cons:
> Browser needs a Flash plug-in > ActionScript is proprietary
12
The next RIA technology is Macromedia Flash. Flash was designed for playing interactive movies. It does come with its own scripting language called ActionScript. The implementation examples of flash technology is Macromedia Flex or Laszlo suite which is open source based. The nice thing about Flash is that because of its origin, it is very good for displaying vector graphics. A downside is that a browser has to have a flash plug-in in order to run Flash. Another downside is that ActionScript is proprietary technology.
10/08/2006
Java WebStart
Desktop application delivered over the net
> Leverages the strengths of desktop apps and applet
Pros
> > > > >
Desktop experience once loaded Leverages Java technology to its fullest extent Disconnected operation is possible Application can be digitally signed Incremental redeployment
Cons
> Old JRE-based system do not work > First-time download time could be still significant
13
Java Web Start technology basically lets a website to deliver desktop Java application over the net. In that sense, it is leveraging the strengths of applet and desktop applications. The strength of an applet is its distribution model in which a user automatically gets always up to date code. The weakness of the applet compared to desktop application, however, is that in order to use applet you have to have a network connection. The strength of a desktop application, on the other hand, is that a user can use the application in disconnected mode while the major weakness of it is that it has to be manually installed on each client. By using Java WebStart technology, you can install the desktop application as if it is an applet. Once installed, a Java application functions as if it is a standalone desktop application. Now each time you use the application, it checks automatically if there is a newer version or not. And only the pieces that are changed will be downloaded, which is called incremental redeployment. The downside of Java Web Start is that the old JRE-base system, JDK 1.1 and below, do not work with it since it is introduced from JDK 1.2 and the first time download time could be significant.
10/08/2006
DHTML (Dynamic HTML)

DHTML = JavaScript + DOM + CSS Used for creating interactive applications No asynchronous communication, however
> Full page refresh still required > Reason why it has only a limited success
14 Dynamic DHTML is basically combination of JavaScript, DOM and CSS. And it has been used for creating interactive and responsive Web applications. However, DHTML alone still does not provide asynchronous communication, which means the full page refresh is still required. And this is the reason why DHTML has only a limited success.
10/08/2006
DHTML with Hidden IFrame

IFrame was introduced as a programmable layout to a web page
> An IFrame is represented as an element of a DOM tree > You can move it, resize it, even hide it while the page is
visible
An invisible IFrame can add asynchronous behavior

> The visible user experience is uninterrupted operational
context is not lost
It is still a hack
15 IFrame was introduced a few years ago as a programmable layout to a web page. What this means is that an iframe is represented as an element of a DOM tree and you can move it, resize it, or even hide it while the parent page that includes it is still visible to a user. Now what people found is that when you make the iframe as an hidden element, it can add asynchronous behavior to the web application meaning a user can continue to function while the iframe is retrieving the page in the background. This is basically providing AJAX-like behavior in which the visible end user experience is uninterrupted. The downside is that iFrame is being used for the purpose it was not designed for. And there are in fact several limitations compared AJAX, which I am not going into detail here.
10/08/2006
AJAX
DHTML plus Asynchronous communication capability through XMLHttpRequest Pros
> > > >
Most viable RIA technology so far Tremendous industry momentum Several toolkits and frameworks are emerging No need to download code & no plug-in required
Cons
> Still browser incompatibility > JavaScript is hard to maintain and debug
AJAX-enabled JSF components will help
16
You can think of AJAX as DHTML plus asynchronous communication capability through XMLHttpRequest JavaScript object. AJAX is probably the most viable RIA technology so far. And there is a tremendous industry momentum behind AJAX. There are several toolkits and frameworks that can be used for developing production quality AJAX applications. The nice thing about AJAX compared to other RIA technologies is that you don't have to download or configure a plug-in to make it work.
10/08/2006
3. AJAX: Real-life Examples
Now let me show you some real life examples of AJAX for people who have not seen it or for people who have seen it but did not realize they were using AJAX underneath.
10/08/2006
Real-Life Examples of AJAX Apps

Google maps
> http://maps.google.com/
Goolgle Suggest
> http://www.google.com/webhp?complete=1&hl=en
NetFlix
> http://www.netflix.com/BrowseSelection?lnkctr=nmhbs
Gmail
> http://gmail.com/
Yahoo Maps (new)

> http://maps.yahoo.com/
Many more are popping everywhere
18
Everybody knows Google maps now. And it is highly likely everybody has used Google maps. Google maps is the one that really triggered the AJAX phenomenon. Other applications that use AJAX underneath include Google Suggest which is basically auto-completion. And more comprehensive use of AJAX is Gmail application. Yahoo is revamping their sites using AJAX. And more and more Web sites are beginning to use AJAX.
10/08/2006
AJAX: Demo Google Maps, Yahoo Maps New
Now let me do a bit of demo of Google maps and Yahoo's new maps.
10/08/2006
Key Aspects of Google Maps

A user can drag the entire map by using the mouse
> Instead of clicking on a button or something
The action that triggers the download of new map data is not a specific click on a link but a moving the map around Behind the scene - AJAX is used
> The map data is requested and downloaded asynchronously
in the background
Other parts of the page remains the same

> No loss of operational context 20
Now let me talk about key functional aspects of the Google maps. First, you can drag the entire map by moving the mouse. In order to see other parts of the map, all you have to do is moving the mouse instead of clicking a button. What happens behind the scene is that the mouse movement triggers the downloading of the new map data in the background. Please also note that the other parts of the page remain the same. This means there is no loss of operational context.
10/08/2006

Real-time server-side input form data validation
> User IDs, serial numbers, postal codes > Removes the need to have validation logic at both client side
for user responsiveness and at server side for security and other reasons
Auto-completion
> Email address, name, or city name may be auto-completed as
the user types
Master detail operation

> Based on a user selection, more detailed information can be
fetched and displayed
21
Some usage cases for AJAX interactions are the following: * Real-Time Server side input form Data Validation: Form data such as user IDs, serial numbers, postal codes, or even special coupon codes that require server-side validation can be performed through AJAX. Now in general, applications have to have both client side validation and server side validation, the former for the purpose of user responsiveness and the latter due to security and other reasons such as the validation has to use backend data. Now having validation logic in two different places causes the maintenance problem of the application. Now using AJAX, you removes the need to have validation logic in two different places. * Auto-completion: A specific portion of form data such as an email address, name, or city name may be autocompleted as a user types. * Master Details Operations: Based on what a user selects, more detailed information can be retrieved and displayed. For example, if a user selects a product on a online shopping page, detailed information on that product can be retrieved and displayed without refreshing the page.
10/08/2006

Advanced GUI widgets and controls
> Controls such as tree controls, menus, and progress bars
may be provided that do not require page refreshes
Refreshing data
> HTML pages may poll data from a server for up-to-date data
such as scores, stock quotes, weather, or application-specific data
Simulating server side notification

> An HTML page may simulate a server-side notification by
polling the server in the background
22
This is the more example usage cases of AJAX technology. * Advanced User Interface Controls: Controls such as tree controls, menus, and progress bars may be provided that do not require page refreshes. * Refreshing Data on the Page: HTML pages may poll data from a server for up-to-date data such as scores, stock quotes, weather, or application-specific data. * Server-side Notifications: An HTML page may simulate a server-side notification by polling the server for event notifications that may notify the client with a message, refresh page data, or redirect the client to another page.
10/08/2006
AJAX: Demo AJAX Sample Apps That Come with NetBeans IDE
OK, let me give you demos on running AJAX sample applications that come with NetBeans IDE.
10/08/2006
Demo Scenario
Run sample AJAX applications within NetBeans IDE
> Auto completion > Data validation > Progress bar
You can try this demo yourself

> These applications are provided as built-in sample
applications in NetBeans
24 NetBeans comes with several AJAX sample applications. Here I am going to run Auto completion, Data validation, and Progress bar sample applications.
10/08/2006
4. AJAX: What is and Why AJAX?
So far, we talked about issues of conventional applications and we have seen how AJAX can address these issues. Now let's talk about what AJAX is from a bit more under the hood standpoint.
10/08/2006
Why AJAX?
Intuitive and natural user interaction
> No clicking required > Mouse movement is a sufficient event trigger
"Partial screen update" replaces the "click, wait, and refresh" user interaction model
> Only user interface elements that contain new information are
updated (fast response) > The rest of the user interface remains displayed without interruption (no loss of operational context)
Data-driven (as opposed to page-driven)

> UI is handled in the client while the server provides data
26
As you have seen, AJAX based web applications allow more intuitive and natural user interaction. For example, unlike conventional web application, you don't need to do a click a link or button to trigger an event. A mouse movement or typing a character into a input form field could be a sufficient event trigger. Under AJAX-based application, partial screen update replaces the old click, wait a refresh the whole page model. Partial screen update means only the element that contain new information is updated while the rest of the page remains the same so that you do not lose the operational context.
Another aspect of AJAX is AJAX enables the interaction between the client and server to be data-driven rather than page-driven. In other words, the UI is handled by the client while the data is provided by the server. This generally results in higher performance,reduced bandwidth, reduced work load on the server, and a better end user experience
10/08/2006
Why AJAX?
Asynchronous communication replaces "synchronous request/response model."
program requests information from the server in the background > Separation of displaying from data fetching
> A user can continue to use the application while the client
27 As its name implies, AJAX allows asynchronous communication between the browser and the backend server. What this means to a user experience is that a user can continue to function while the browser performs HTTP request/response interaction asynchronously in the background. In other words, the data fetching operation is done independently from displaying the information under AJAX-based interaction model.
10/08/2006
Interrupted user operation while the data is being fetched
Uninterrupted user operation while data is being fetched
28
I assume some of you have seen this picture before. This picture compares the user interaction models of conventional web application in the top half of the slide against AJAX-fied web application in the bottom part of the slide. On the top, it is how a user interaction occurs when conventional web application is used. Here a user has to stop and wait until a response is received. What this means is that data fetching activity interrupts the user operation. The bottom picture shows how a user interaction occurs for AJAX application. In this model, a user keeps operating since the data fetching occurs in the background.
10/08/2006
29
So how does AJAX application performs the asynchronous communication with the server? This slide also compares conventional web application and AJAX application. In the left side, which shows the conventional web application, HTTP request/response interaction occurs directly between a browser and a backend web application. In the right side, which shows AJAX based web application, within a browser, there is AJAX engine, which is actually represented by a JavaScript object called XMLHttpRequest which handles the HTTP request/response interaction in an asynchronous fashion.
10/08/2006
5. AJAX: Technologies Used in AJAX
Now let's take a look at the technologies that make up an AJAX application.
10/08/2006
Technologies Used In AJAX

Javascript
> Loosely typed scripting language > JavaScript function is called when an event in a page occurs > Glue for the whole AJAX operation
DOM
> API for accessing and manipulating structured documents > Represents the structure of XML and HTML documents
CSS
> Allows for a clear separation of the presentation style from the
content and may be changed programmatically by JavaScript
XMLHttpRequest
> JavaScript object that performs asynchronous interaction with the
server
31
This slide shows the technologies used in AJAX. * JavaScript - JavaScript is a loosely typed object based scripting language supported by all major browsers and essential for AJAX interactions. JavaScript functions in a page are invoked as event handlers when an event in a page occurs such as a page load, a mouse click, or a key press in a form element. * DOM - is API for accessing and manipulating structured documents. In most cases DOM represent the structure of XML or HTML documents. * CSS - Allows you to define the presentation of a page such as fonts, colors, sizes, and positioning. CSS allow for a clear separation of the style from the content and may be changed programatically by JavaScript. * HTTP - Understanding the basic request/response interaction model of HTTP is important for a developer using AJAX. You will be exposed to the GET and PUT method when configuring an XMLHttpRequest and HTTP response codes when processing callback.
10/08/2006
XMLHttpRequest
JavaScript object Adopted by modern browsers
> Mozilla, Firefox, Safari, and Opera
Communicates with a server via standard HTTP GET/POST XMLHttpRequest object works in the background for performing asynchronous communication with the backend server
> Does not interrupt user operation
32 Now let's talk about XMLHttpRequest a bit. It is a JavaScript object, which means it gets created within a JavaScript code. The XMLHttpRequest JavaScript object is supported in most modern browsers. It is the AJAX engine that performs the HTTP request/response interaction with the backend web application in asynchronous fashion.
10/08/2006
Server-Side AJAX Request Processing

Server programming model remains the same
> It receives standard HTTP GETs/POSTs > Can use Servlet, JSP, JSF, ...
With minor constraints

> More frequent and finer-grained requests from client > Response content type can be
> text/xml > text/plain > text/json > text/javascript 33 Now, how does server side web application handle the AJAX interaction with the browser? Well as far as Server side code is concerned, it is just another HTTP request that comes in. The server side does not even know the browser is sending the HTTP request in asynchronous fashion and it should not. What this means is that the server side web application can use any server side technology of its choice such as servlet, JSP, JSF, Struts, or whatever. The server side application however has minor constraints. First, it is possible the client might send more frequent and finer grained requests. The response type can be text/xml, text/plain, text/json, or text/javascript.
10/08/2006
6. AJAX: Anatomy Of AJAX Interaction using Data Validation Sample Application
In the remaining part of the presentation, I would like to go over the anatomy of AJAX interaction using the data validation sample application.
10/08/2006
Anatomy of an AJAX Interaction (Data Validation Example)
35 Now that we have discussed what AJAX is and the technologies that make up the AJAX, let's put all these pieces together and see how things are working underneath. The example code we are going to use is Data validation example. Here a user types characters into a input form data field. That is denoted as number 1 in the slide. That will trigger an onkeyup event. The onkeyup event handler then gets called in which XMLHttpRequest object gets created and configured. That is noted as number 2 in the slide. The XMLHttpRequest object then sends HTTP request along with what the user has typed in to the server. That is number 3 on the slide. The server performs the validation of the data and returns its result. Those are denoted as number 4 and 5 in the slide. The callback function on the client side is then called. The callback function then changes a HTML element in the page to reflect the data that has been received from the server.
10/08/2006
Steps of AJAX Operation

1.A client event occurs 2.An XMLHttpRequest object is created 3.The XMLHttpRequest object is configured 4.The XMLHttpRequest object makes an async. request 5.The ValidateServlet returns an XML document containing the result 6.The XMLHttpRequest object calls the callback() function and processes the result 7.The HTML DOM is updated
36
So this slide shows the steps of AJAX operation. Here I described it as 7 steps, which occur in the order specified. Now the steps in the blue color occur at the client while the one in the black color, step 5 occurs at the server. Now let's go over each of these steps in a bit more detail.
10/08/2006
1. A Client event occurs

A JavaScript function is called as the result of an event Example: validateUserId() JavaScript function is mapped as a event handler to a onkeyup event on input form field whose id is set to userid
<input type="text" size="20" id="userid" name="id" onkeyup="validateUserId();">
37
. first event that triggers the whole AJAX operational sequence is that a user types a The character into a input text form field, whose id is set to userid. This user triggered event is captured as JavaScript event called onkeyup. JavaScript event handler called validateUserId() is then called as a result.
10/08/2006
2. An XMLHttpRequest object is created

var req; function initRequest() { if (window.XMLHttpRequest) { req = new XMLHttpRequest(); } else if (window.ActiveXObject) { 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); }
38
The validateUserId() event handler creates an XMLHttpRequest JavaScript object through initRequest() function in this example. Please note that the way an XMLHttpRequest object gets created for Microsoft Internet Explorer is different from the way how it gets created for Mozilla type browsers. For Mozilla type browsers, you use new XMLHttpRequest() just like the way you create a new Java object while for Microsoft Internet Explorer, you have to create ActiveX object This is one of the browser incompatibilities that still exist.
10/08/2006
3. An XMLHttpRequest object is configured with a callback function

var req; function initRequest() { if (window.XMLHttpRequest) { req = new XMLHttpRequest(); } else if (window.ActiveXObject) { isIE = true; req = new ActiveXObject("Microsoft.XMLHTTP"); } } function validateUserId() { initRequest(); req.onreadystatechange = processRequest; // callback function if (!target) target = document.getElementById("userid"); var url = "validate?id=" + escape(target.value); req.open("GET", url, true); req.send(null); }
39
Once XMLHttpRequest object is created, the next thing to do is to set the onreadystatechange property of the XMLHttpRequest object to a callback function. This callback function gets called asynchronously whenever state change occurred on the XMLHttpRequest. In this example, the name of the callback function is processRequest, which we will examine in the following slide. We will talk about possible state changes later on.
10/08/2006
4. XMLHttpRequest object makes an async. request

function initRequest() { if (window.XMLHttpRequest) { req = new XMLHttpRequest(); } else if (window.ActiveXObject) { 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); } URL is set to validate?id=greg
40
Then the open method of the XMLHttpRequest gets called.
The open method requires three parameters: the HTTP method, which is GET or POST; the URL of the server-side component that the object will interact with; and a boolean indicating whether or not the call will be made asynchronously or not. In this example, and in most cases, it is set to true, which means the HTTP request/response interaction occurs in asynchronous fashion.
10/08/2006
5. The ValidateServlet returns an XML document containing the results (Server)

public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException { String targetId = request.getParameter("id"); if ((targetId != null) && !accounts.containsKey(targetId.trim())) { response.setContentType("text/xml "); response.setHeader("Cache-Control", "no-cache"); response.getWriter().write("<valid>true</valid>"); } else { response.setContentType("text/xml "); response.setHeader("Cache-Control", "no-cache"); response.getWriter().write("<valid>false</valid>"); } }
41
Now HTTP response is created. First, the Content-Type is set to text/xml. Second, the Cache-Control is set to no-cache. Setting Cache-Control to no- cache will keep browsers from using locally caching responses. Finally it will return trueor false XML fragment.
10/08/2006
6. XMLHttpRequest object calls callback() function and processes the result The XMLHttpRequest object was configured to call the processRequest() function when there is a state change to the readyState of the XMLHttpRequest object
function processRequest() { if (req.readyState == 4) { if (req.status == 200) { var message = ...; ...
42
Now the control is back to the client. We have seen in step 3, the processRequest function is set as a callback function whenever there isa state change in the readyState field of the XMLHttpRequest object. The combination of two things - the readyState value of the XMLHttpRequest is 4 and the status value is 200 - indicates that the data from the server has been successfully received by the client.
10/08/2006
7. The HTML DOM is updated

JavaScript technology gets a reference to any element in a page using DOM API The recommended way to gain a reference to an element is to call
> document.getElementById("userIdMessage"), where
"userIdMessage" is the ID attribute of an element appearing in the HTML document
JavaScript technology may now be used to modify the element's attributes; modify the element's style properties; or add, remove, or modify child elements
43
Once the data has been successfully received, the browser is then ready to display a relevant message. Now the location where you want to display a message is represented by <div> element in the page. In your Javascript code, you get a reference to any element in a page using DOM API. And the recommended method to use is getElementById and you pass the id as a parameter. In this example, the id of the <div> element is set as userIdMessage. Once you have a reference to an element, you can do pretty much anything you want to do, for example, changing the values of element attributes, element style or add/remove/modify the child elements. In this example, you are going to add text node as a child element to the userIdMessage element.
10/08/2006
1. <script type="text/javascript"> 2. function setMessageUsingDOM(message) { 3. var userMessageElement = document.getElementById("userIdMessage"); 4. var messageText; 5. if (message == "false") { 6. userMessageElement.style.color = "red"; 7. messageText = "Invalid User Id"; 8. } else { 9. userMessageElement.style.color = "green"; 10. messageText = "Valid User Id"; 11. } 12. var messageBody = document.createTextNode(messageText); 13. // if the messageBody element has been created simple replace it otherwise 14. // append the new element 15. if (userMessageElement.childNodes[0]) { 16. userMessageElement.replaceChild(messageBody, 17. userMessageElement.childNodes[0]); 18. } else { 19. userMessageElement.appendChild(messageBody); 20. } 21.} 22.</script> 23.<body> 24. <div id="userIdMessage"></div> 25.</body>
44
Here you get a reference to <div> element using getElementById method of the document object. And then depending on the data that is returned from the server false or true -, the messageText variable is set to either Invalid User Id or Valid User Id text string. A new text node is then created using the messageText variable. Then it is added as a child node to the userIdMessage element. The browser then immediately display the text on the page. So in this page, the partial update occurs with only with userIdMessage element.
10/08/2006
7. AJAX: XMLHttpRequest Methods & Properties
Now let's quickly go over the XMLHttpRequest methods and properties one more time.
10/08/2006
XMLHttpRequest Methods
open(HTTP method, URL, syn/asyn) send(content) abort()
> Assigns HTTP method, destination URL, mode
> Sends request including string or DOM object data > Terminates current request
getAllResponseHeaders()
getResponseHeader(header)
> Returns value of a given header
> Returns headers (labels + values) as a string
setRequestHeader(label,value)
> Sets Request Headers before sending

46
This is the list of the methods of the XMLHttpRequest object. The most important methods are open() and send() methods. The open method configures the XMLHttpRequest object with HTTP method, destination URL, and calling mode. The send method send a request to the server. The abort terminates the current request. The rest of the methods are getting header information of the request or response message.
10/08/2006
onreadystatechange
> Set with an JavaScript event handler that fires at each state
change
readyState current status of request

> 0 = uninitialized > 1 = loading > 2 = loaded > 3 = interactive (some data has been returned) > 4 = complete
status
> HTTP Status returned from server: 200 = OK
47
These are the properties of the XMLHttpRequest object. You have already seen onreadystatechange property, which is set with an callback event handler. The actual state is captured in the readyState property. The callback event handler set with the onreadystatechange property gets called every time readyState changes its value. The most important value is 4, which indicates that interaction with the server is complete. The status property reflects the HTTP status and the value 200 means it is a successful response.
10/08/2006
responseText
> String version of data returned from the server
responseXML
> XML document of data returned from the server
statusText
> Status text returned from server
48
This is a continuation of the properties of the XMLHttpRequest object. The properties on this slide reflect the data that is returned from the server. The responseText property is a string version of the data returned from the server while the responseXML property reflects the XML representation of the data.
10/08/2006
8. AJAX: DOM API & InnerHTML
Let's go over the DOM APIs a bit.
10/08/2006
Browser and DOM

Browsers maintain an object representation of the documents being displayed
> In the form of Document Object Model (DOM) > It is readily available as document JavaScript object
APIs are available that allow JavaScript code to modify the DOM programmatically
50
Browsers maintain an object representation of the HTML documents being displayed. And this object is in the form of DOM object. As was mentioned, within the JavaScript code, you have a programmatic access to DOM object through DOM APIs. For example, you can access, modify or delete nodes through DOM APIs.
10/08/2006

DOM APIs provide a means for JavaScript code to navigate/modify the content in a page
function setMessageUsingDOM(message) { var userMessageElement = document.getElementById("userIdMessage"); var messageText; if (message == "false") { userMessageElement.style.color = "red"; messageText = "Invalid User Id"; } else { userMessageElement.style.color = "green"; messageText = "Valid User Id"; } var messageBody = document.createTextNode(messageText); if (userMessageElement.childNodes[0]) { userMessageElement.replaceChild(messageBody, userMessageElement.childNodes[0]); } else { userMessageElement.appendChild(messageBody); } }
51
As we talked about, DOM APIs provide a means for you to navigate, modify the contents of a page. You see examples of DOM APIs being used in the code of the slide.
10/08/2006

Using innerHTML is easier: Sets or retrieves the HTML between the start and end tags of the object
function setMessageUsingDOM(message) { var userMessageElement = document.getElementById("userIdMessage"); var messageText; if (message == "false") { userMessageElement.style.color = "red"; messageText = "Invalid User Id"; } else { userMessageElement.style.color = "green"; messageText = "Valid User Id"; } userMessageElement.innerHTML = messageText; }
52 Usage of innerHTML is easier than using DOM APIs for setting or retrieving the html code fragment between the starting and ending tags of a node. In this example, by setting the innerHTML property of the userMessageElement, the html code fragment between the starting and ending tag of the userMessageElement node, you are assigning the text node.
10/08/2006
9. AJAX Security
OK. What about Security?
10/08/2006
AJAX Security: Server Side

AJAX-based Web applications use the same serverside security schemes of regular Web applications
> You specify authentication, authorization, and data protection
requirements in your web.xml file (declarative) or in your program (programatic)
AJAX-based Web applications are subject to the same security threats as regular Web applications
> Cross-site scripting > Injection flaw
54 As for the security of AJAX web applications, they use the same security schemes of regular web applications. In other words, just like regular Web applications, you specify your authentication, authorization, and data protection requirements in the web.xml or write code that perform those security checks. And any HTTP requests coming from the client, whether it is from regular Web application or from AJAX applications, it is constrained by the server side security schemes. In the same vein, the AJAX-based applications are subject to the same security threats as regular web applications. For example, they are subject to such threats such as cross-site scripting or injection flaw.
10/08/2006
AJAX Security: Client Side

JavaScript code is visible to a user/hacker
> Hacker can use the JavaScript code for inferring server side
weaknesses > Obfustication or compression can be used
JavaScript code is downloaded from the server and executed (eval) at the client
> Can compromise the client by mal-intended code
Downloaded JavaScript code is constrained by sand-box security model

> Can be relaxed for signed JavaScript
55 Now a couple of things that are different between AJAX applications and regular applications are on the client side. First, the JavaScript code is visible to a hacker, who could use it for inferring server side weaknesses. Second, the JavaScript code is executed at the client. And malintended JavaScript code can compromise the client.
10/08/2006
10. JavaScript Development Tools (Try these tools with AJAX Basics & Dev. Tools Hands-on Lab)
Now let's spend some time talking about development tools. These are development tools mostly for client side. The server side debugging is not that much different from what you already do.
10/08/2006
Development Tools for NetBeans IDE

Building AJAX Applications over NetBeans is not that much different from building regular Web applications NetBeans JavaScript editor plug-in
> http://www.liguorien.com/jseditor/
57 First of all, I would like to say upfront that building AJAX applications over NetBeans is not that much different from building regular Web applications over it. There is a JavaScript editor plug-in available for NetBeans.
10/08/2006
Development Tools on Mozilla Browser

Mozilla FireBug debugger (add-on)
> This is the most comprehensive and most useful JavaScript
debugger > This tool does things all other tools do and more
Mozilla JavaScript console Mozilla DOM inspector (comes with Firefox package) Mozilla Venkman JavaScript debugger (add-on) Mozilla LiveHTTPHeaders HTTP monitor (similar to NetBeans HTTP monitor)
58
One of the most comprehensive and useful JavaScript debugger I found is Mozilla FireBug debugger. This tool provides features all the other tools combined and more. I will talk about the features of the FireBug in the following slide. Most of the time, FireBug debugger should be the one you want to use. Mozilla class browsers come with a built-in JavaScript console. The DOM inspector can be installed when you install Firefox browser. You have to select custom installation. You can install Venkman JavaScript debugger for source-code level debugging of your JavaScript code. There are are a few more development tools that are being introduced. Another tool that you might want to consider, if you are not using NetBeans IDE, which already provides this capability, is LiveHttpHeaders HTTP monitor which captures HTTP traffic.
10/08/2006
Mozilla FireBug Debugger

Spy on XMLHttpRequest traffic JavaScript debugger for stepping through code one line at a time Inspect HTML source, computed style, events, layout and the DOM Status bar icon shows you when there is an error in a web page A console that shows errors from JavaScript and CSS Log messages from JavaScript in your web page to the console (bye bye "alert debugging") An JavaScript command line (no more "javascript:" in the URL bar)
59
This slide describes the features of the Mozilla FireBug debugger. First of all, you can do source code level step by step debugging. The status bar shows whether you have a problem in your web page. The console shows syntax errors from your JavaScript or CSS code. The Firebug lets you log messages and let them get displayed in the console. One nice feature I liked a lot is spying on XMLHttpRequest traffic. Finally it lets you inspect HTML source, style, events, layout.
10/08/2006
11. AJAX: Current Issues & Futures
Let's go over some of the current issues in developing AJAX applications and future direction.
10/08/2006

Complexity is increased
presentation logic will be required in the HTML client pages as well as in the server-side logic > Page developers must have JavaScript technology skills
> Server side developers will need to understand that
AJAX-based applications can be difficult to debug, test, and maintain

> JavaScript is hard to test - automatic testing is hard > Weak modularity in JavaScript > Lack of design patterns or best practice guidelines yet
Toolkits/Frameworks are not mature yet

> Most of them are in beta phase
61
Even though AJAX is picking a steam among web application developers, there are still some issues that need to be resolved. First, complexity of the application could be increased. Server-side developers will need to understand that presentation logic will be required in the HTML client pages as well as in the server-side logic. HTML page developers must have JavaScript technology skills. AJAX based applications can be difficult to debug, test and maintain. For example, JavaScript code is considered to be harder to do automatic testing. And design patterns and best practices still need to established. Even though there are many toolkits and frameworks, many of them are still in version 1 or less phase.
10/08/2006

No standardization of the XMLHttpRequest yet
> Future version of IE will address this
No support of XMLHttpRequest in old browsers

> Iframe will help
JavaScript technology dependency & incompatibility

> Must be enabled for applications to function > Still some browser incompatibilities
JavaScript code is visible to a hacker

> Poorly designed JavaScript code can invite security problem
62
The slide shows the current issues of the AJAX as a technology.
10/08/2006
Browsers Which Support XMLHttpRequest

Mozilla Firefox 1.0 and above Netscape version 7.1 and above Apple Safari 1.2 and above. Microsoft Internet Exporer 5 and above Konqueror Opera 7.6 and above
63
This is the list of browsers and their versions that support XMLHttpRequest, thus supporting AJAX behavior.
10/08/2006
AJAX Futures
AJAX-enabled JSF Component libraries Standardization of XMLHttpRequest Better browser support Better and Standardized Framework support More best practice guidelines in the programming model
64 Now what could be the future of AJAX? First of all, more and more AJAX-enabled JSF components will be developed and available so that you can build your Web applications with AJAX behavior but with minimum development effort. The way that the XMLHttpRequest object gets created will be standardized. As I mentioned before, Microsoft is committed to use the standard way of creating it. The future generation of browsers will be more and more AJAX friendly. And further enhancement in framework support will continue. Of course, people will identity and share best practice and design patterns for developing AJAX applications. Creating AJAX-enabled applications will become easier as new frameworks are created and existing frameworks evolve to support the interaction model.
10/08/2006
AJAX Basics
Thanks for attending the presentation.
Web 2.0 Frameworks and Toolkits

Sang Shin Sun Microsystems, Inc. sang.shin@sun.com www.javapassion.com
1
Types of Web 2.0 Toolkit and Framework Solutions of Today

Clients-side JavaScript Libraries (ex: Dojo toolkit and more) RMI-like remoting via proxy (ex: DWR) Integrator (ex: jMaki) Java to JavaScript/HTML translator (ex: GWT) AJAX-enabled JSF components (ex: NetBeans VWP) Dynamic Faces (DynaFaces) Portlets and Ajax (ex: JSR 168 portlets) Web Application Frameworks with AJAX extension (ex: Echo2 or Wicket)
2
Client Side JavaScript Libraries (Examples: Dojo Toolkit, Ext JS)
Client Side JavaScript Libraries

HTMP, JSP Pages, JavaScript Event Handlers
UI Widgets & Components
Remoting Abstraction Layer JavaScript,

DOM Utilities
XMLHttpRequest
iFrame 4
Characteristics of Client Side JavaScript Libraries

Server side technology agnostic
> The server side technology can be Java EE, .Net, PHP, Ruby
on Rails, etc.
You can use them in combination in a single app

> You might want to use widgets and JavaScript utilities from
multiple sources
Technical Reasons for using Clientside JavaScript Libraries

Handles remote asynch. communication (remoting)
> Hides low-level XMLHttpRequest operation
Handles browser incompatibilities

> No need to clutter your code with if/else's
Handles graceful degradation

> Uses IFrame if the browser does not support
XMLHttpRequest
Provides page navigation hooks over Ajax

> Back and forward buttons > Bookmarking

Provides ready-to-use widgets
> Tree, Calendar, Textfield, Button, Split panes, Fisheye, etc.
Provides easy-to-use DOM utility

> Easier to use than original DOM APIs
Provides useful JavaScript utilities

> Example: Table management, Timer, etc
Provides error handling hook

> Easier to add error handler
Provides more flexible event handling

> DOM node based, Function call based, AOP style

Provides advanced UI features
> Animation > Drag and drop > Fade out and Fade in
Generally encourages OO programming style

> Helps you write better JavaScript code
Business Reasons for using Clientside JavaScript Libraries

Proven in the market
> Generally higher quality than your own
Established developer/user communities

> Community keeps improving/adding features > Easy to get help from community forums
Easy to use
> It is just a matter of having them in the root directory of your
Web application or providing URL location
Tool support
> IDE's will support them in time
Client-side JavaScript Libraries

DOJO Toolkit
> > > >
Most prominent and comprehensive Gaining a leadership in this space Major industry support (Sun, IBM) http://dojotoolkit.com/
Prototype
> Used by other toolkit libaries > http://prototype.conio.net/
Ext JS
> Gaining popularity > http://extjs.com/
10
Client-side JavaScript Libraries

Script.aculo.us
> Built on Prototype > Nice set of visual effects and controls > http://script.aculo.us/
Rico
> Built on Prototype > Rich AJAX components and effects > http://openrico.org/
DHTML Goodies
> Various DHTML and AJAX scripts > http://www.dhtmlgoodies.com/
11
Demo: Running Various Client Side JavaScript Toolkit Demos

http://www.javapassion.com/han dsonlabs/ajaxframeworks/
12
Dojo Toolkit
Dojo toolkit is made of a set of layered libraries
14
dojo.io.bind()
var sampleFormNode = document.getElementById("formToSubmit"); dojo.io.bind({ url: "http://foo.bar.com/sampleData.js", load: function(type, evaldObj){ // hide the form when we hear back that it submitted successfully sampleFormNode.style.display = "none"; }, backButton: function(){ // ...and then when the user hits "back", re-show the form sampleFormNode.style.display = ""; }, formNode: sampleFormNode });
source: dojotoolkit.org
15
dojo.event.connect()
window.onload = function () { var link = document.getElementById("mylink"); // myHandler event handler is registered for the // "onclick" event of mylink node. dojo.event.connect(link, "onclick", myHandler);
// Define an event handler named as myHandler function myHandler(evt) { alert("myHandler: invoked - this is my named event handler"); } </script> <a href="#" id="mylink">Click Me</a>
16
Demo: Building and Running Dojo Toolkit Applications

http://www.javapassion.com/han dsonlabs/4260_ajaxdojointro.zip
17
Dojo Demo Scenario

Build and run input validation Ajax application using Dojo toolkit's dojo.io.bind()
> Forward, backward capabilities
Build and run Fisheye application using dojo.event.connect()

> Event model
18
RMI-like Remoting via Proxy (Example: DWR)
RMI-like Remoting via Proxy

JavaScript RMI like call Java Method
Proxy
Skeleton
Remote Abstraction Layer

HTTP Get/Post
XMLHttpRequest
Framework runtime
iFrame
20
Why DWR?
What happens if you have several methods in a class on the server that you want to invoke from the browser?
> Each of these methods need to be addressable via URI
whether you are using XMLHttpRequest directory or clientside only toolkit such as Dojo or Prototype > You would have to map parameters and return values to HTML input form parameters and responses yourself
DWR provides a client/server framework that addresses these problems DWR comes with some JavaScript utility functions
21
How DWR Works
22
DWR Consists of Two Main Parts

A DWR-runtime-provided Java Servlet running on the server that processes incoming DWR requests and sends responses back to the browser
> uk.ltd.getahead.dwr.DWRServlet > This servlet delegates the call to the backend class you
specify in the dwr.xml configuration file
JavaScript running in the browser that sends requests and can dynamically update the webpage
> DWR framework handles XMLHttpRequest handling
source: http://getahead.ltd.uk/dwr
23
How Does DWR Work?

DWR generates a matching client-side Javascript class from a backend Java class
> Allows you then to write JavaScript code that looks like
conventional RPC/RMI like code, which is much more intuitive than writing raw JavaScript code
The generated JavaScript class handles remoting details between the browser and the backend server
> Handles asynchronous communication via XMLHttpRequest -
Invokes the callback function in the JavaScript > You provide the callback function as additional parameter > DWR converts all the parameters and return values between client side Javascript and backend Java
24
Demo: Building and running DWR Application

http://www.javapassion.com/han dsonlabs/4265_ajaxdwrintro.zip
25
DWR Demo Scenario

Build and run Chat application
> Test with 2 browser clients
Show test feature of DWR

> http://localhost:8084/dwr.examples.chat/dwr
Show Java class and its methods that are exposed

> Chat has two methods getMessages() and addMessage()
Show dwr.xml configuration file

> Specifies Chat class for remoting
Show client-side JavaScript code

> RMI-like syntax (application-level) > Asynchronous callback
26
Integration Technology: jMaki
Motivations for jMaki

You want to leverage widgets from existing and future AJAX toolkits and frameworks in reusable fashion
> Dojo, Scriptaculus, Google Widgets, Yahoo UI Widgets,
DHTML Goodies, Many more
However, these widgets use different syntax and different data model
> There is a need for a common programming model and
common data model for using widgets from multiple AJAX toolkits and frameworks
28
Origins of jMaki?
j is for JavaScript technology Maki == to wrap in Japanese Started as a way of wrapping JavaScript technology functionality
> Take widgets from many popular AJAX toolkits and
frameworks, and wrap them into a JSP or JSF tag
Project jMaki has evolved to provide more
29
jMaki Features
Widgets from popular toolkits
> Dojo, Yahoo, Script.aculo.us, Spry, Google
> Self-contained standards-based Component Library
Make JavaScript technology accessible to Java technology, Phobos, PHP and Ruby Publish and subscribe event model XmlHttpProxy
> Allows access to services not in the web app domain
Integrated Tools support

> NetBeans and Eclipse plug-in's
Future Protection
> Unified data model for widgets from different toolkits
30
Benefits of using jMaki
31
Demo: Building and running jMaki Application

http://www.javapassion.com/handson labs/4270_ajaxjmakiintro.zip http://www.javapassion.com/handson labs/4271_ajaxjmakimashup.zip
32
jMaki Demo Scenario

Build a simple jMaki application using widgets from various sources
> Using simpler syntax and consistent data model
Build a Mashup application using jMaki widgets

> Leveraging publish/subscribe event model
Build a RSS feed application using jMaki widgets

> Leveraging XmlHttpProxy
33
Java Code To JavaScript/HTML Translator: GWT
What is GWT?
Java software development framework that makes writing AJAX applications easy Let you develop and debug AJAX applications in the Java language using the Java development tools of your choice
> NetBeans or Eclipse
Provides Java-to-JavaScript compiler and a special web browser that helps you debug your GWT applications
> When you deploy your application to production, the compiler
translates your Java application to browser-compliant JavaScript and HTML
35
Two Modes of Running GWT App

Hosted mode
> Your application is run as Java bytecode within the Java
Virtual Machine (JVM) > You will typically spend most of your development time in hosted mode because running in the JVM means you can take advantage of Java's debugging facilities
Web mode
> Your application is run as pure JavaScript and HTML,
compiled from your original Java source code with the GWT Java-to-JavaScript compiler > When you deploy your GWT applications to production, you deploy this JavaScript and HTML to your web servers, so end users will only see the web mode version of your application 36
Why Use Java Programming Language for AJAX Development?

Static type checking in the Java language boosts productivity while reducing errors. Common JavaScript errors (typos, type mismatches) are easily caught at compile time rather than by users at runtime. Code prompting/completion (through IDE) is useful and widely available Automated Java refactoring is pretty snazzy these days. Java-based OO designs are easier to communicate and understand, thus making your AJAX code base more comprehensible with less documentation.
37
Why GWT?
No need to learn/use JavaScript language
> Leverage Java programming knowledge you already have
No need to handle browser incompatibilities and quirks

> GWT handles them for you > Forward/backward buttons > Browser history
No need to learn/use DOM APIs

> Use Java APIs
No need to build commonly used Widgets

> Widgets come with GWT
38
Why GWT?
Leverage various tools of Java programming language for writing/debugging/testing
> For example, NetBeans or Eclipse
JUnit integration
> GWT's direct integration with JUnit lets you unit test both in a
debugger and in a browser and you can even unit test asynchronous RPCs
Internationalization
> GWT internationalization support provides a variety of
techniques to internationalize strings, typed values, and classes

39
Demo: Building and running GWT Applications

http://www.javapassion.com/han dsonlabs/4275_ajaxgwtintro.zip
40
Demo: GWTHello
Build and run GWTHello sample application from GWT hands-on lab in
> Hosted mode (Debug project) > Web mode
Make a break point in Hosted mode
41
GWT Demo Scenario

Build and run a simple HelloWorld GWT application
> Write the code in Java programming language > Run it in both hosted and web mode
Open KitchenSink NetBeans GWT project and run

> Play around various widgets provided by the GWT > Backward and forward button behavior
Show how to invoke JavaScript code from Java code and vice versa Show how to associate a CSS style items to a GWT widget
42
AJAX-Enabled JSF Components
AJAX-enabled JSF Components

AJAX-enabled JSF components hides all the complexity of AJAX programming
> Page author does not need to know JavaScript > The burden is shifted to component developers
Leverages drag-and-drop Web application development model of JSF through an IDE

> You can drag and drop AJAX-enabled JSF components within
NetBeans Visual Web Pack (and other JSF-aware IDE's) to build AJAX applications
JSF components are reusable

> More AJAX-enabled JSF components are being built by the
community
44
Open-Source Implementations
Woodstock AJAX-enabled JSF components (opensource)
> https://woodstock.dev.java.net/index.html
ICEfaces
> http://www.icefaces.org/main/home/index.jsp
ajax4jsf
> Can add AJAX capability to existing applications > https://ajax4jsf.dev.java.net/
45
Dynamic Faces (DynaFaces)
DynaFaces Usage Patterns

Page Author > Use AJAX enabled components > Use AjaxZone tag to AJAXify regions of the page > Use provided JavaScript library to AJAXify page elements and components Component Author > Use provided JavaScript library in custom components > Write your own JavaScript that talks directly to the HTTP protocol and the XML application defined by DynaFaces
Increasing Complexity Increasing Complexity
Views and Partial Views
Views and Partial Views
DynaFaces Usage Patterns: AjaxZones

The easiest way to AJAXify an existing application Demarcate one or more AJAX zones within a page Zones will refresh via AJAX, without full page refresh.
causes reaction in another zone Action in one zone
2. See update here
1. Click something in here
Demo: Building and running DynaFaces Application

http://www.javapassion.com/han dsonlabs/4144_jsfdynafaces.zip
51
Building Portlets with Ajax Behavior
Issues with Current Portlet Architecture

No easy way to make asynchronous call
> same as regular Web application
The response contains markup for the whole page not just for the target portlet Will be addressed in JSR 286
53
Demo: Building and running Porlet Application with Ajax behavior

http://www.javapassion.com/han dsonlabs/4294_ajaxportlet.zip
54
Portlets with Ajax Demo Scenario

Build Portlet that has Ajax behavior Show two different windows of the same portlet perform Ajax operations independently from each other
55
Web Application Frameworks with AJAX Extension
Web Application Framework with Ajax Extension

Existing Web Application Frameworks add AJAX functionality
> Minimum or no requirement of JavaScript coding
Uses JavaScript client library internally
57
Web App Frameworks with AJAX Extension Implementations

Shale
> http://struts.apache.org/struts-shale/
Echo2
> http://www.nextapp.com/platform/echo2/echo/
Wicket
> http://wicket.sourceforge.net/
Ruby on Rails
> http://www.rubyonrails.org/
58
Demo: Building and running Ajax enabled Echo2 Application

http://www.javapassion.com/han dsonlabs/4282_ajaxecho2.zip
59
So... What Should I Use?
So What Should I Use? Assuming You are using Java Tech.

On the UI side
> Use AJAX-enabled JSF components whenever possible using
an JSF-enabled IDE such as Visual Web Pack of NetBeans > If you are not ready to commit yourself to JSF component solutions yet, use jMaki > If you want to have total control on the client side JavaScript coding, use Dojo toolkit > If you already have Swing apps that you want to expose as AJAX-fied Web apps or if you do not want to deal with JavaScript coding, use GWT
61
So What Should I Use? Assuming You are using Java Tech.

On the business logic side
> If you already have Java EE business logic that you want to be
exposed as RMI calls on the client with AJAX behavior, use DWR > If you are already using a particular Web application framework for building majority of your web application and the framework has AJAX extension, use it
62
So What Should I Use? If you want use Scripting Language as a Main enabler
Use Ruby on Rails or Phobos or Grails
> > > >
Leverage agile development of scripting Leverage the power of Java platform MVC based Multiple scripting languages
63
Ajax Frameworks and Toolkits

Sang Shin Java Technology Evangelist Sun Microsystems, Inc.
64
Building Portlets with Ajax Behavior
Topics
Issues with Current Portlet Architecture Work-around Maintaining portlet state Avoiding namespace collision Next generation Portal server
Issues with Current Architecture (for supporting Ajax) & One work-around
Issues with Current Portlet Architecture

No easy way to make asynchronous call The response contains markup for the whole page not just for the target portlet Will be addressed in JSR 186
One Work-around
One Work-around
Make an asynchronous call to Servlets and JSP that are bundled with the portlet
> Because a portlet is a Web application that can
contain other resources, such as servlets and JSP pages > The portlet and the servlet should be able to share information between themselves through their sesssion > The Invoice Viewer sample includes a servlet that you can call to asynchronously render new content in the portlet
6
Maintaining Portlet State
Sharing Portlet State

When you dynamically update portlet content with an Ajax call to a servlet, how do you maintain the portlet's state?
> The PortletSession must store all attributes in the
HttpSession of the portlet application. > A direct consequence of this is that data stored in the HttpSession by servlets or JSPs is accessible to portlets through the PortletSession in the portlet application scope. > Conversely, data stored by portlets in the PortletSession in the portlet application scope is accessible to servlets and JSPs through the HttpSession.
8
Saving Portlet State in HTTP Session in Servlet code

InvoiceServlet stores the invoicenumber attribute in HttpSession when doPost() is asynchronously called by the portlet, as follows.
> request.getSession().setAttribute(namespace +
".invoicenumber", invoice);
Retrieving Portlet State from HTTP Session in Portlet Code

Portlet's main JSP page (view.jsp) can check for the invoicenumber attribute by calling getAttribute() on PortletSession, as follows.
<% // Check for invoice in session. String invoice = (String)renderRequest.getPortletSession().getAttribute( namespace + ".invoicenumber", PortletSession.APPLICATION_SCOPE); %> 10
Information Sharing Between a Portlet and a Servlet
11
Using JavaScript Library
Using JavaScript in Portlet

You can use many emerging JavaScript libraries and toolkits within a portlet's Web application
> Dojo toolkit > Many more
13
Example: view.jsp
<script type="text/javascript"> /* Use dojo.io.bind to asynchronously get invoice content. */ function <portlet:namespace/>_loadInvoice(invoice) { /* If an invoice was selected ... */ if (invoice != null && invoice != "null") { /* Put selected invoice value on query string. */ var querystring = new Array(); querystring['invoice'] = invoice; /* Set up bind arguments: */ /* url: url for request */ /* method: http method */ /* content: key/value mapping of parameters sent with request */ /* handle: function to run when there is a response */ /* mimetype:mimetype of response */ var bindArgs = { url: "<%=renderResponse.encodeURL(renderRequest.getContextPath() + "/ InvoiceServlet")%>", method: "POST", content: querystring, handle: function(type, data, evt) { if (type == "error") { /* Swap returned error message */ data = "<p style='color:red'>" + data.message + "</p>"; } /* Swap the returned data into the div tag. */ var div = document.getElementById("<portlet:namespace/>_content"); div.innerHTML = ""; div.innerHTML = data; }, mimetype: "text/html"
14
Avoiding Namespace Collisions
Two Possible Areas of Namespace collisions

Portlet namespace Dojo namespace (or any other JavaScript toolkit library)
16
Avoid Portlet Namespace Collision

Each portlet window (from the same portlet) should have its own namespace
> Use <portlet:namespace/> > Apply it to both functions and variables
Example
> <portlet:namespace/>_loadInvoice = function
(invoice) { > ... > <div id="<portlet:namespace/>_content"></div>

17
Dojo Namespace Collision Issue

The sample bundles the Dojo JavaScript library in its WAR file and, once deployed, references that library. However, other portlets on the portal might also use Dojo, but Dojo allows only one top-level reference for its reserved namespace. Verify that it is not loaded by checking the namespace and dynamically loading the Dojo library only when it is absent. Subsequently, the script dynamically adds JavaScript on the client when the content is loaded.
18
Avoid Dojo Namespace Collision

<div id="<portlet:namespace/>_main"> <script type="text/javascript">
/* Load the Dojo library if it hasn't been loaded already. */ if (typeof dojo == "undefined") { /* Build script tag. */ var script = document.createElement("script"); script.src = "<%=renderResponse.encodeURL(renderRequest.getContextPath() + "/js dojo.js") %>"; script.type= "text/javascript"; /* Insert at the top of portlet main. */ var <portlet:namespace/>_main = document.getElementById("<portlet:namespace/>_main"); <portlet:namespace/>_main.insertBefore(script, <portlet:namespace/>_main.firstChild); } </script>
19
Next Generation Portal Server Desktop with Ajax Support
AJAX Desktop Functional Overview

Asynchronous loading of channels and portlets Delegates aggregation to the client (via AjaxTableContainer) AJAXified container controls such as refresh, maximize, minimize, and remove Drag and drop positioning of channels Support for multiple page layouts Seamlessly support AJAX portlets developed in NetBeans, using the NetBeans plugin Integrate into PS 7.x as global level container provider
21
High Level Architecture
22

Browser
DOJO Javascript Library HTML sunportal.AJAXTableContainer JSON sunportal.AJAXChannel sunportal.AJAXRequest AJAXEditContainerProvider
Portal (Enterprise Sample)

AJAXTableContainerProvider
JSON: Javascript Object Notation (www.json.org)
23

JSON: JavaScript Object Notation
> It is easy for humans to read and write. > It is easy for machines to parse and generate. > It is based on a subset of the JavaScript Programming
Language
JSON is built on two structures:

> A collection of name/value pairs. In various languages, this is
realized as an object, record, struct, dictionary, hash table, keyed list, or associative array. > An ordered list of values. In most languages, this is realized as an array, vector, list, or sequence.
24
Design Constraints
The AJAX Container must meet the following constraints:
> The client browser is required to support Javascript and have it enabled. > The AJAX Container will NOT automatically AJAXenable content within a channel/portlet. It is the channel/portlet developer's responsibility to incorporate AJAX functionality (if required) in the channel/portlet content. > Edit pages of channels and portlets may have to be customized to appear properly in the inline edit box.
25
Client Side Library Design - Dojo

Open source DHTML Toolkit written entirely in Javascript Provides easy to use Event system, DOM and I/O APIs Ships with a small core that can load packages as required Sun is standardizing on Dojo as AJAX library of choice Javascript library provides more flexibility in application design than hybrid frameworks such as DWR and GWT 26
Client Side Library Design

PagePreferences sunportal.AJAXTableContainer sunportal.AJAXChannel JSON container model JSON channel model
sunportal.AJAXRequest
sunportal.AJAXTableContainer uses Dojo DOM API to construct portal page from the JSON container model All requests made using sunportal.AJAXRequest which uses Dojo I/O API Event system uses XHR Callback model to handle server responses
27
Desktop Server-Side Design

Desktop acts as a content service for the AJAX client.
> Requests are made via standard desktop URLs (e.g.
provider=foobar&action=content)
> Responses are either:
> HTML content > JSON messages
Desktop defers aggregating the content to the client (container model).

> Powerful performance implications > Aggregation can be half of used CPU cycles.
28
Desktop Server Design Get Content
29
JSR-286 Effort on Ajax Support
JSR-286: Ajax Support

Currently asynchronous rendering of portlets is not currently mentioned in the Portlet Specification AJAX (Asynchronous JavaScript technology and XML) support is vendor specific Difficult to get AJAX working for more than one portlet on a page State is updated without server roundtrip and thus the state that may be encoded in other portlets may be stale Bypasses standard browser paradigms, like back button and reload.Lot of extra effort is required to get these paradigms working again in an AJAX application
Ajax and Portlet
Sang Shin sang.shin@sun.com www.javapassion.com Java Technology Architect
Ajax Security
Sang Shin Java Technology Evangelist Sun Microsystems, Inc.
1
Disclaimer & Acknowledgments

Even though Sang Shin is a full-time employee of Sun Microsystems, the contents here are created as his own personal endeavor and thus does not necessarily reflect any official stance of Sun Microsystems on any particular technology Many slides are created from the contents posted in dojotoolkit.org website
Topics
Guidelines from OWASP Guidelines from Douglas Crockford Security threats (in Ajax environment)
Client side Suggested Guidelines (from OWASP)
Use .innerText instead of .innerHtml

The use of .innerText will prevent most XSS problems as it will automatically encode the text. Only use innerHtml when you are displaying HTML.
Don't use eval

Eval is evil, never use it. Needing to use eval usually indicates a problem in your design.
Don't rely on client logic for security

Hackers can use a number of browser tools to set breakpoints, skip code, change values, etc. Never rely on client logic.
Don't rely on client business logic

Make sure any business rules/logic is duplicated on the server side since a user can bypass the needed logic and do something silly, or worse, costly.
Encode Data before use

When using data to build HTML, script, CSS, XML, JSON, etc., make sure you take into account how that data must be presented in a literal sense to keep it's logical meaning. Data should be properly encoded before used in this manor to prevent injection style issues, and to make sure the logical meaning is preserved. Check out the OWASP Encoding Project.
Avoid writing serialization code

This is hard and even a small mistake can cause large security issues. There are already a lot of frameworks to provide this functionality.
10
Avoid building XML dynamically

It could cause XML injection bugs, so stay way from this or at least use an encoding library to make attributes and element data safe. > Just like building HTML or SQL Check out the OWASP Encoding Project.
11
Never transmit secrets to the client

Hackers can find them out Keep all that secret stuff on the server please.
12
Don't perform encryption in client side code

Use SSL and encrypt on the server!
13
JSON and Browser Security (from Douglas Crockford)
Never Trust The Browser

The browser cannot and will not protect your secrets, so never send it your secret sauce. Keep your critical processes on the server. If you are doing input validation in the browser, it is for the users convenience. Everything that the browser sends to the server must be validated.
15
Keep Data Clean

The eval function can take a text from XMLHttpRequest and instantly inflate it into a useful data structure. Be aware however that the eval function is extremely unsafe. If there is the slightest chance that the server is not encoding the JSON correctly, then use the parseJSON method instead.
> The parseJSON method uses a regular expression to ensure that
there is nothing dangerous in the text. > The next edition of JavaScript will have parseJSON built in. For now, you can get parseJSON at http://www.JSON.org/json.js.
On the server side, always use good JSON encoders and decoders. 16
Script Tags
Script tags are exempt from the Same Origin Policy. That means that any script from any site can potentially be loaded into any page. There are some very important consequences of this. Any page that includes scripts from other sites is not secure. External scripts can be used to deliver ads or search result options, or logging, or alerts, or buddy lists, or lots of other nice things. Unfortunately, the designs of JavaScript and the DOM did not anticipate such useful services, so they offer absolutely no security around them. Every script on the page has access to everything on the page.
17
Security Threats In Ajax Environment
Universal XSS
Exploits flaws of browsers
19
HTTP Request Splitting

Exploits the flaws in the asynchronous requests
> Hackers can inject arbitrary headers when HTTP request is
built
20
Questions?
Best Practice Guidelines in using Ajax with Java Server Faces

Craig R. McClanahan Senior Staff Engineer Sun Microsystems, Inc. Inc
Agenda
Background Best practice guidelines Examples:
> Auto Complete Text Component > DynaFaces AJAX Zones
Summary Resources
Backgrounds
Background
Building AJAX based applications is easy ...
> If you are a JavaScript guru > If you have memorized the entire DOM API > If you own and study books on DHTML, JavaScript, CSS,
AJAX, and useful hacks for each technology
Building AJAX based applications is hard ...

> If you come from a mostly static HTML/CSS background > If you are comfortable with traditional web application
architectures built around an HTTP POST > If your primary use of JavaScript is cut-n-paste of cute animations and other cool in-page behaviors
Background
Can we make this process easier for mere mortals? Classic computer science answer: encapsulation
> Hide functionality behind simple building blocks > Provide a framework for assembling complicated things
out of simple things > Embed the encapsulations inside development tools that can do some of the grunt work
JavaServer Faces components encapsulate AJAX technologies

5
Best Practice Guidelines
Architectural Decisions
To AJAX or not to AJAX, that is the question ... Render markup + code or just code? Manage client side interactions Access static resources Asynchronous callbacks client side view Asynchronous callbacks server side view
Architectural Decisions: To Ajax or Not to Ajax?
To AJAX Or Not To AJAX ...

First inclination when talking about AJAX and JSF:
> Create AJAX-aware versions of every component
When does this make sense?

> Individual component needs remote access for state: Assumption: visualization depends on server state changes Example: Progress Bar (for server side process) Example: RSS News Headlines (that dynamically change) Example: Is this username already taken? validation > Individual component needs remote access for data: Assumption: too much data to load with the initial page Examples: Auto Complete Text Field, Table, Tree Control
9

When does this not make sense?
> Primarily interested in partial page submit: Grab a subset of the input elements on this page, and ... Submit them to update server side state ... Without requiring a full page submit > Primarily interested in partial page refresh: Respond to a partial page submit by ... Updating part of the current view ... Without requiring a full page redisplay
Frameworks exist to provide these facilities for any JavaServer Faces component
> We will see an example later
10

Recommendations:
> Design or use AJAX enabled components when
necessary > Use frameworks to manage partial page submit and partial page refresh scenarios
11
Architectural Decisions: Render Markup+Code or Just Code?
Render Markup+Code Or Just Code

> Render all the markup and related JavaScript code for
each component individually > Note: Applies to non-AJAX components also

> Markup is very simple and/or highly use case specific > Corresponding JavaScript code is very simple > Note: Hybrid solution is also feasible: Generate custom markup per component Reference JavaScript libraries for code common to all occurrences of a particular component
13
Render Markup+Code Or Just Code?

When does that not make sense?
> Markup is complex > Corresponding JavaScript code is complex > Using a JavaScript widget library for rendering
Recommendations:
> Use JavaScript widget libraries when feasible: JSF renders JS code to create and configure the widget > Factor per-component JavaScript into static resources: Leverage client side caching Ensure that required resources are loaded transparently Ensure that required resources are loaded once per page
14
Architectural Decisions: Manage Client side Interactions
Manage Client Side Interactions

> Create custom JavaScript APIs to interact with other
client side components > Note: Applies to non-AJAX components also

> Providing functionality above and beyond standard
JavaScript event handlers
Such as an asynchronous callback to update state
> Encapsulating complex interactions Such as coordinated updates of multiple client side elements
16
Manage Client Side Interactions

> When standard JavaScript event handlers are sufficient Leverage developer familiarity > When you want to support unanticipated interactions Document enough about internal architecture to allow this
Recommendations:
> Use standard client side interaction paradigms: JavaScript object per widget Standard event handlers where feasible > Consider event-driven or publish/subscribe paradigms > JSF Specific be aware of component id generation
algorithms
17
Architectural Decisions: Access Static Resources
Access Static Resources

> Embed all required JavaScript and stylesheets in the
generated markup of each component > Note: Applies to non-AJAX components also

> When the required JavaScript is very simple and/or use
case specific > When the required stylesheet information is very simple and use case specific
19

> JavaScript for a particular component can be factored
into a common library > CSS styles can be factored into common stylesheets that can be overridden by the developer
Recommendations:
> Factor JavaScript and CSS into static resources > Ensure that only one copy of each resource gets loaded
into a single page > Trigger runtime loading of static resources transparently
Developer should not need to care that your component needs a particular script file or stylesheet
20
Architectural Decisions: Asynchronous Callbacks
Asynchronous Callbacks Client

> Hand code the XMLHttpRequest handling individually for
each component

> Basically never :-)

> Basically always :-)
22
Asynchronous Callbacks Client

Recommendations:
> Encapsulate XMLHttpRequest handling into common
JavaScript functions
Per component, or ideally, per library
> Leverage existing JavaScript frameworks: More elegant client side APIs Hide browser dependencies > Leverage facilities of the server side framework: See next section ...
23
Asynchronous Callbacks Server

> Write a custom servlet for each component's
asynchronous callback handler

> In simple use cases > When the client side is not your JSF component library

> Asynchronous callback needs to access and/or update
the JSF component tree for the current view > Need to manage data serialization and deserialization
Affects client side also
24
Asynchronous Callbacks Server

Recommendations:
> Leverage JSF server side framework capabilities: JSF component state for PPS/PPR use cases Managed beans for simple IoC requirements
Can integrate more complex frameworks for non-simple use cases
Method binding expresions to invoke server side logic
> Utilize libraries and frameworks for data transport: Common formats: XML and JSON Minimize requirements imposed on the server side developer as well as the client side developer > Support non-JSF-component clients: Not every UI will be created with JSF, or even Java Not every callback will be from a browser
25
Examples
Examples
Auto Complete Text Field Component Dynamic Faces (DynaFaces) AJAX Zones
27
Auto Complete Text Field
28

To AJAX Or Not To AJAX:
> Provide embedded AJAX functionality
Render Markup+Code Or Just Markup:

> Hybrid: custom (simple) markup, shared JavaScript
Client Side Interactions:

> Component creates well-known DOM element ids > Standard JavaScript events plus two custom ones

> Shale Remoting library
29

Asynchronous Callbacks Client Side:
> Standard JavaScript object per component instance > Utilize DOJO Toolkit for asynchronous IO > Simple XML data format
Asynchronous Callbacks Server Side:

> No need to access JSF component tree state > Component-provided managed bean for callback handler > Component invokes application-provided method (with
simple API) to provide data
Application developer does not need to know the gory details

30
Demo
Dynamic Faces (DynaFaces)

Extension framework for JavaServer Faces 1.1/1.2
> Built on top of standard extension APIs
Delivers solutions for several of our focus areas:

> To AJAX Or Not To AJAX: AJAX Zones for partial page refresh scenarios Works with non-AJAXified components > Client Side Interactions: Trigger asynchronous callbacks programmatically Deferred transactions for post-callback event handling > Server Side Interactions: Fire server side event handlers Manage client-server data formatting
32
Summary & Resources
Summary
JavaServer Faces was originally targeted as a traditional server-side-markup-generation component framework JavaServer Faces can be leveraged in many ways to build AJAX-based web applications JavaServer Faces supports the use of AJAX techniques on components not specifically designed for AJAX interactions
34
Resources
JavaServer Faces:
> http://java.sun.com/javaee/javaserverfaces/
Java BluePrints Catalog:

> http://java.sun.com/reference/blueprints/
AJAX Developer Resource Center:

> http://developers.sun.com/ajax/
Apache Shale Framework:

> http://shale.apache.org/
DOJO Toolkit:
> http://dojotoolkit.org/
35
Best Practice Guidelines in using Ajax with Java Server Faces

Craig R. McClanahan Senior Staff Engineer Sun Microsystems, Inc. Inc

Ajax

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Ajax

Uploaded by

Copyright:

Available Formats

Introduction to Ajax

Topics Covered in Other Presentations

1. Rich User Experience for Web Application

Rich User Experience

mouse over it > Icons light up as mouse hovers them

Things happen naturally

Characteristics of Conventional Web Applications (Apps without Ajax)

Synchronous request/response communication model

Page-driven: Workflow is based on pages

Issues of Conventional Web Application

Loss of operational context during refresh

No instant feedback's to user activities

2. Rich Internet Application (RIA) Technologies

Rich Internet Application (RIA) Technologies

advanced GUIs > Well-established scheme

DHTML (Dynamic HTML)

DHTML with Hidden IFrame

An hidden IFrame can add asynchronous behavior

context is not lost

AJAX-enabled JSF components will help

3. AJAX: Real-life Examples & Usecases

Real-Life Examples of AJAX Apps

Yahoo Maps (new)

Many more are popping everywhere

AJAX: Demo Google Maps, Yahoo Maps New

Key Aspects of Google Maps

Behind the scene - AJAX is used

Other parts of the page remains the same

Usage cases for AJAX

the user types

Master detail operation

fetched and displayed

Usage cases for AJAX

may be provided that do not require page refreshes

such as scores, stock quotes, weather, or application-specific data

Demo: AJAX Sample Apps javapassion.com/handsonlab s/ajaxbasics2/#Exercise_1

You can try this demo yourself

4. AJAX: What is and Why AJAX?

Data-driven (as opposed to page-driven)

Interrupted user operation while the data is being fetched

Uninterrupted user operation while data is being fetched

5. AJAX: Technologies Used in AJAX

Technologies Used In AJAX

content and may be changed programmatically by JavaScript

Server-Side AJAX Request Processing

With minor caveats

6. AJAX: Anatomy Of AJAX Interaction using Data Validation Sample Application

Anatomy of an AJAX Interaction (Data Validation Example)

Steps of AJAX Operation

1. A Client event occurs

2. An XMLHttpRequest object is created

3. An XMLHttpRequest object is configured with a callback function

4. XMLHttpRequest object makes an async. request

5. The ValidateServlet returns an XML document containing the results (Server)

7. The HTML DOM is updated

"userIdMessage" is the ID attribute of an element appearing in the HTML document

7. AJAX: XMLHttpRequest Methods & Properties

> Sets Request Headers before sending

readyState current status of request

8. AJAX: DOM API & InnerHTML

Browser and DOM

DOM APIs vs. innerHTML

DOM APIs vs. innerHTML