Académique Documents
Professionnel Documents
Culture Documents
AJAX Defined
1
Traditional Web Applications…
Action
Pick An Item Review Cart
‘Add To Cart’
Validation Action Enter
Persistence Enter Data Validation
Forwarding Submit Persistence
Shipping
Enter Data
Forwarding Submit
Persistence
Shopping Cart (DIV)
Event Handlers
Shipping Form (DIV) Shipping
GUI Creation
Component
Billing Form (DIV)
Billing
Component
2
AJAX Enabled Master Detail Form
No screen flicker.
Individual regions or fields updated.
Client sends data to server asynchronously.
Server returns data, messages, gui, or code.
3
XMLHttpRequest Object: Methods
• open(“method”, “URL”)
• open(“method”, “URL”, async, username, password)
– Assigns destination URL, method, etc.
• send(content)
– Sends request including postable string or DOM object data
• abort()
– Terminates current request
• getAllResponseHeaders()
– Returns headers (labels + values) as a string
• getResponseHeader(“header”)
– Returns value of a given header
• setRequestHeader(“label”,”value”)
– Sets Request Headers before sending
XMLHttpRequest Properties
• onreadystatechange
– Event handler that fires at each state change
– You implement your own function that handles this
• readyState – current status of request
– 0 = uninitialized
– 1 = loading
– 2 = loaded
– 3 = interactive (some data has been returned)
• This is broken in IE right now
– 4 = complete
• status
– HTTP Status returned from server: 200 = OK
• responseText
– String version of data returned from server
• responseXML
– XML DOM document of data returned
• statusText
– Status text returned from server
4
Message Flow
<script type=“text/javascript”>
Message
Validation Servlet
name=steve
Or
<name>Steve</name> ValidateName( req, res…) {
XMLHttpRequest parse request
lookup name in database
is it valid?
if so, return OK
function handleResponse() {
otherwise
…read response from server
return error message
…get a handle to the DIV
If Not OK
Replace DIV contents with msg
}
Database
Steve Save <div
Not id=status
a Valid Name >
Client/Browser Server
Message Flow
<script type=“text/javascript”>
Validation Servlet: /validate
_ajax.send( some data ) Get parameters…do some work
Return something…
XMLHttpRequest a text message
an XML document
an HTML snippet
function doResp() { a javascript method
if _ajax.readyState == 4 and whatever you want…
_ajax.status != 200 {
div=document.getElementById(‘status’)
div.innerHTML = _ajax.responseText;
Message
Save button onchange event: status=999
_ajax = new XMLHTTPRequest(); msg=Not a valid name
_ajax.onreadystatechange = doResp;
url = ‘./validate?field=’
+this.name+‘&value=’+this.value;
_ajax.open(‘GET’, url, true )
Database
Steve Save <div
Not id=status
a Valid Name >
Client/Browser Server
5
Security Issues
• You can only hit the domain that the original web
page came from
• Ping Example
• 10 Sequential Pings
• Big File Example
• onchange Example
• onkeypress Example
• DropDown handling
– Auto Form Filling
• Form Handling
– Retrieving Form Data
– Form Posting via AJAX
• DIV replacement
– via text
– via XML
• Google Suggest Example
6
Wow..I didn’t
know soccer
teams did web
programming..
How It Works
7
JavaScript Returned
They said go
EJBs…then they
said WSDL…now
AJAX?
8
So why is AJAX so hot—NOW?
• It has a name
– Think LAMP
• Every year for the past 3 or 4 years has been the “year of the
rich client”
– I think its time…
Users Like It
A LOT
9
Some people don’t like AJAX…
10
Things To Consider…
• AJAX requires a different way of thinking about how you build your application
11
What about the Refresh button?
• Back Button
– Make it work as an undo?
• Refresh Button
– Save state in <body onload> method?
12
AJAX will be around for a long time…
AJAX Patterns
13
Common Widgets
• Form Validation
• Interactive Grids
• Drilldowns TreeViews
• Auto Completion
• Application Status Area
• Progress Bars
• Dynamic Lists
• Tabs
• AJAX’ed Portlets
• Predictive Fetch
AJAX Frameworks
• Server-Side Framework
– HTML/JavaScript Generation
• Server provides complete HTML/JS code generation and
browser server coordination
• Browser-side coding is for customization
– Remote Invocation
• JavaScript calls routed directly to server-side functions (Java
Methods) and returned back to Javascript callback handlers
14
• Pure JavaScript
– DOJO (9/04)
–
–
–
Prototype (2001)
Open Rico (5/05)
Qooxdoo (5/05)
Pick a
• Pure JavaScript Infrastructural
–
–
AjaxJS (5/05)
HTMLHttpRequest (2001)
Framework…
–
–
–
Interactive Website Framework (5/05)
LibXMLHttpRequest (6/03)
RSLite
any Framework
– Sack (5/05)
– Sarissa (2/03)
– XHConn (4/05)
• Server-Side (Multi Language)
– Cross-Platform Asynchronous Interface Toolkit (5/05)
– SAJAX (3/05)
– Javascript Object Notation (JSON) & JSON-RPC
– Javascript Remote Scripting (2000)
• Server-Side (Java)
– Echo2 (3/05)
– Direct Web Remoting (DWR) (2005)]
– ThinkCAP Minerva (04/2005)
• Server-Side (Lisp)
– CL-Ajax
• Server-Side (.NET)
– Ajax.NET (305)
• Server-Side (PHP)
– AjaxAC (4/05)
www.ajaxpatterns.org
– JPSpan
– XAJAX
• Server-Side (Ruby)
– Ruby-On-Rails (3/05)
Sites of Interest
• www.ajaxmatters.com
• www.ajaxian.com
• www.ajaxpatterns.org
• Foundational Libraries
– Prototype
• very OO foundation to manipulate XMLHTTPRequest
• Core of “Ruby on Rails” AJAX implementation
– OpenRico
• Builds on Prototype, adds some controls
• Nice “effects” library to zoom/fade/shrink GUI elements
– Sarissa
• Heavy duty XML library for XSLT
– SAJAX & XAJAX
• PHP libraries with some good ideas
• Server driven JS creation
15
Our AJAX Implementation & Experience
16
What is needed to build real AJAX apps?
• Problem
– Developers hand code data access
– No provisions for error handling
– No data binding mechanism
– Need to handle nested transactions
• ThinkCAP Solution
– Built to support transactional
business applications
– Data binding & form generation
– Master/detail record linkage
– Declarative transaction
boundaries on components
– Standard error handling routine
– TransactionSafe™ eliminates
database connection leaks
– Javascript generation for most
common tasks
17
ThinkCAP: 3-Tier Client/Server Event Model
• Problem
– Developers hand code
Javascript events
• ThinkCAP Solution
– Integrated & tested three-tier client/server event model
– Executes event logic on client or server
– Over 25 response methods minimize hand-crafted Javascript
– Advanced context & response management
– Drag & Drop Events
public ClientResponse zipcode_change(ClientContext con) {
ClientResponse response = new ClientResponse();
String zipCode = con.getFieldValue();
if ( !isValidZip(zipCode) ) {
response.alert(‘Zip Code is not valid.’);
response.select(‘zipcode’);
response.setFocus(‘zipcode’);
… more code …
• Problem
– Rich Internet Apps need controls
for richness. DHTML Javascript is
complex and tedious.
• ThinkCAP Solution
– Library of customizable data-
aware GUI control & effects
• Advanced Controls
– Outlook Bar
– Dynamic Tabs
– Accordion
– TreeView
– Updateable DataView
– Edit Masks
– Autocomplete Field
• Effects
– Fade in, out
– Slide up, down
18
ThinkCAP: Best of Breed Open Source
• Problem
– Integrating open source frameworks
is time consuming and expensive
– Many RAD frameworks & libraries
are completely proprietary
• ThinkCAP Solution
– ThinkCAP integrates over 20 open source libraries
– Based on Struts
• You to rapidly AJAX enable Struts applications
• Existing Struts apps run ThinkCAP w/o modification Hibernate/Castor Designer
• TagLibs for ThinkCAP components
• Struts XML/Page Flow Designer
– Visual designers for metadata
• Hibernate & Castor Designers
• Business Chart Designer (JFreeChart)
– Declarative logging through Log4J
– Apache Commons Validator Server Validation
– Prototype.js and OpenRico used for core client framework
– Integrates with Eclipse; via plug-in
• Problem
– Tedious coding of HTML and Javascript is non-productive
– High levels of expertise needed to hand-craft
– Most tools focus on low-level J2EE features vs. productivity
19
A complete environment for web development
www.clearnova.com
20