300 likes | 611 Views
AJAX Without the “J”. George Lawniczak. What is Ajax?. What is Ajax?. What is Ajax?. A synchronous J avaScript A nd X mlHttpRequest (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
E N D
AJAX Without the “J” George Lawniczak
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 questions: • 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 : Sending the Request true = asynchronous
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 innerHTML • 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 state • Really Simple History (RSH) framework addresses these issues • http://codinginparadise.org/projects/dhtml_history/README.html
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
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 machine. • 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.
JSF and AJAX 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 AJAX. • http://www.nextapp.com/platform/echo2/echo/
Sun BluePrints Solutions Catalog Sun defines best practices for integrating AJAX into JSF applications. https://bpcatalog.dev.java.net/nonav/ajax/
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 Center”
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
Links • 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/
Questions • My E-mail is: glawniczak@gel3.com