; AJAX 101
Learning Center
Plans & pricing Sign in
Sign Out
Your Federal Quarterly Tax Payments are due April 15th Get Help Now >>

AJAX 101


  • pg 1
									AJAX Without the “J”

   George Lawniczak
What is Ajax?
What is Ajax?
What is Ajax?

• Asynchronous
• JavaScript
• And
• XmlHttpRequest (XHR)
  – Some use XML, but to me that’s misleading
Why Ajax?
• XHR Support across all browsers
  – Based on DOM, CSS, XHTML
• Emergence of broadband
  – AJAX-based JavaScript can take considerable
    bandwidth to download
• The “Killer App” - Google Maps
• A Catchy Acronym
  – Coined by Jesse James Garrett of Adaptive Path
    (February 2005)
 Why Ajax?

Source: Garrett(2005)
   Why Ajax?

Source: Garrett(2005)
AJAX Alternatives
• Macromedia Flash
  – Requires a plug-in
     • So what? It comes already with almost every browser
• Java Web Start/Applets
• .NET – No Touch Deployment
  – Both need a runtime preinstalled
• Handheld device browsers generally do not
  support the full range of Ajax technologies.
Implementing AJAX
• To implement AJAX we need to answer three
  – What triggers the AJAX request?
     • Usually a JavaScript event (onblur, onclick, etc.)
  – What is the server process that handles the AJAX
    request and issues the response?
     • Some kind of URL (use a Service Locator)
  – What processes the response from the
    server(what is the callback method)?
     • A JavaScript function that gets the response and
       manipulates the DOM, based on the text returned.
XmlHttpRequest Object (XHR)
• The Heart of AJAX
• First implemented in IE in 1997 as part of the
  new DHTML standard
• Response comes in one of two properties:
  – responseXML – Returns a DOM document (can use
    functions such as, getElementById())
  – responseText – A text string (can be HTML, or
    even JavaScript code)
XHR : Creating
XHR : Sending the Request

                        true = asynchronous
XHR : Using a callback handler
Handling the Response
• Response can be one of the following:
  – Formatted data (XML, other custom format)
     • XMLHttpRequest.responseXML
     • Decouples the server from presentation issues
     • Could perform XSLT transformation on returned XML
  – HTML
     • XMLHttpRequest.responseText
     • Server generates HTML, script “injects” HTML via
     • Server is now concerned with presentation
  – JavaScript
     • XMLHttpRequest.responseText
     • Use the eval() JavaScript command
     • Again, our server code is concerned with presentation
AJAX Concerns
•   Security
•   Browser Compatibility
•   Accessibility
•   The Back Button
•   What if JavaScript is Turned Off?
AJAX and the Back Button
• Huge usability issue
• Returning to the previous state may not be
  possible when a page is updated dynamically
• Difficult to bookmark on a particular page
• Really Simple History (RSH) framework
  addresses these issues
  – http://codinginparadise.org/projects/dhtml_history/README.html
AJAX Security – Server of Origin Policy
AJAX Security
• Browsers impose security restrictions
  – Cannot make requests via the XHR outside
    of the domain the web page came from
     • Can set security on IE to get around this (but
       you really don’t want to)
     • Mozilla-based browsers require digitally signing
       your script (Yuck!)
  – User must approve going to site.
     • Firefox requires additional code
AJAX Security
• Calling third-party web-services
  – Application Proxies – Call the web-service
    from a servlet
  – Apache Proxy – Configure Apache to
    invisibly reroute from the server to the
    target web service domain
Encapsulating our AJAX Logic
Encapsulating our AJAX Logic (cont.)
Problems with JavaScript
• Most Java developers know enough
  JavaScript to be dangerous.
  – If you don’t know what you are doing, you
    could cause memory leaks on the client
• Most JavaScript functionality can be
  factored out and encapsulated
Ajax Without the J
It would be nice to encapsulate all of the
  JavaScript within our components, so
  we don’t have to write any JavaScript.

JavaServer Faces (JSF) provides a way to
  accomplish this.
Why JSF makes sense
- JSF Lifecycle
- Separates the things that don’t change
  (client-side) from the things that do
  change (server-side)
- Echo2 is another Java component-
  based web framework that supports
  -   http://www.nextapp.com/platform/echo2/echo/
Sun BluePrints Solutions Catalog
Sun defines best practices for integrating
  AJAX into JSF applications.

Java Studio Creator 2
Sun has released several AJAX components that
  are available for Creator 2
      - Auto-Complete Text Field
      - Progress Bar
      - Map Viewer
      - Select Value Text Field
Obtain components via Creator’s “Update
Demo – Creator 2 AJAX Components
• Auto Complete
• Map Viewer
• Drag-and-drop components
  – Code server-based functionality
Demo – DWR (Direct Web Remoting)
• Call methods from a POJO that reside
  on the server.
• Wraps objects in a JavaScript wrapper
• Original AJAX Blog by Jesse James Garrett
   –   http://adaptivepath.com/publications/essays/archives/000385.php

• “Fixing AJAX: XMLHttpRequest Considered Harmful”
   –   http://www.xml.com/pub/a/2005/11/09/fixing-ajax-xmlhttprequest-considered-harmful.html

• DWR (Direct Web Remoting) Home Page
   –   http://getahead.ltd.uk/dwr/

• Java AJAX BluePrints Solutions Catalog
   –   https://bpcatalog.dev.java.net/nonav/ajax/index.html

• “AJAX Without the J” Blog
   –   http://www.jsfcentral.com/listings/A10500?link

• Really Simple History (RSH) Framework
   –   http://codinginparadise.org/projects/dhtml_history/README.html

• ECHO 2 Web Framework
   -   http://www.nextapp.com/platform/echo2/echo/
• My E-mail is:

To top