Transcript AJAX 101
AJAX 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 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 : 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 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 – 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 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 componentbased 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 – http://www.xml.com/pub/a/2005/11/09/fixing-ajax-xmlhttprequest-considered-harmful.html – http://getahead.ltd.uk/dwr/ – https://bpcatalog.dev.java.net/nonav/ajax/index.html – http://www.jsfcentral.com/listings/A10500?link – http://codinginparadise.org/projects/dhtml_history/README.html - http://www.nextapp.com/platform/echo2/echo/ • “Fixing AJAX: XMLHttpRequest Considered Harmful” • DWR (Direct Web Remoting) Home Page • Java AJAX BluePrints Solutions Catalog • “AJAX Without the J” Blog • Really Simple History (RSH) Framework • ECHO 2 Web Framework Questions • My E-mail is: [email protected]