1 / 30

AJAX Without the “J”

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

dex
Download Presentation

AJAX Without the “J”

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. AJAX Without the “J” George Lawniczak

  2. What is Ajax?

  3. What is Ajax?

  4. What is Ajax? • Asynchronous • JavaScript • And • XmlHttpRequest (XHR) • Some use XML, but to me that’s misleading

  5. 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)

  6. Why Ajax? Source: Garrett(2005)

  7. Why Ajax? Source: Garrett(2005)

  8. 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.

  9. 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.

  10. 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)

  11. XHR : Creating

  12. XHR : Sending the Request true = asynchronous

  13. XHR : Using a callback handler

  14. 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

  15. AJAX Concerns • Security • Browser Compatibility • Accessibility • The Back Button • What if JavaScript is Turned Off?

  16. 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

  17. AJAX Security – Server of Origin Policy

  18. 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

  19. 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

  20. Encapsulating our AJAX Logic

  21. Encapsulating our AJAX Logic (cont.)

  22. 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

  23. 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.

  24. 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/

  25. Sun BluePrints Solutions Catalog Sun defines best practices for integrating AJAX into JSF applications. https://bpcatalog.dev.java.net/nonav/ajax/

  26. 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”

  27. Demo – Creator 2 AJAX Components • Auto Complete • Map Viewer • Drag-and-drop components • Code server-based functionality

  28. Demo – DWR (Direct Web Remoting) • Call methods from a POJO that reside on the server. • Wraps objects in a JavaScript wrapper

  29. 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/

  30. Questions • My E-mail is: glawniczak@gel3.com

More Related