introduction to ajax
DESCRIPTION
TRANSCRIPT
Introduction to AJAX Introduction to AJAX
Venkat pinagadiVenkat pinagadi
What is Ajax?What is Ajax?
AAsynchronoussynchronous
JJavaScriptavaScript
AAndnd
XXmlHttpRequest (XHR)mlHttpRequest (XHR) Some use XML, but to me that’s Some use XML, but to me that’s
misleadingmisleading
Why Ajax?Why Ajax?
XHR Support across all browsersXHR Support across all browsers Based on DOM, CSS, XHTMLBased on DOM, CSS, XHTML
Emergence of broadbandEmergence of broadband AJAX-based JavaScript can take considerable AJAX-based JavaScript can take considerable
bandwidth to downloadbandwidth to download The “Killer App” - Google MapsThe “Killer App” - Google Maps A Catchy AcronymA Catchy Acronym
Coined by Jesse James Garrett of Adaptive Path Coined by Jesse James Garrett of Adaptive Path (February 2005) (February 2005)
Why Ajax?Why Ajax?
Why Ajax?Why Ajax?
AJAX AlternativesAJAX Alternatives
Macromedia Flash Macromedia Flash Requires a plug-inRequires a plug-in
So what? It comes already with almost every browserSo what? It comes already with almost every browser
Java Web Start/Applets Java Web Start/Applets .NET – No Touch Deployment.NET – No Touch Deployment
Both need a runtime preinstalledBoth need a runtime preinstalled Handheld device browsers generally do not Handheld device browsers generally do not
support the full range of Ajax technologies.support the full range of Ajax technologies.
Implementing AJAXImplementing AJAX
To implement AJAX we need to answer To implement AJAX we need to answer three questions:three questions: What triggers the AJAX request?What triggers the AJAX request?
Usually a JavaScript event (onblur, onclick, etc.)Usually a JavaScript event (onblur, onclick, etc.) What is the server process that handles the What is the server process that handles the
AJAX request and issues the response?AJAX request and issues the response? Some kind of URL (use a Service Locator)Some kind of URL (use a Service Locator)
What processes the response from the What processes the response from the server(what is the callback method)?server(what is the callback method)?
A JavaScript function that gets the response and A JavaScript function that gets the response and manipulates the DOM, based on the text returned.manipulates the DOM, based on the text returned.
XmlHttpRequest Object XmlHttpRequest Object (XHR)(XHR)
The Heart of AJAXThe Heart of AJAX First implemented in IE in 1997 as part of First implemented in IE in 1997 as part of
the new DHTML standardthe new DHTML standard Response comes in one of two properties:Response comes in one of two properties:
responseXML – Returns a DOM document (can responseXML – Returns a DOM document (can use functions such as, use functions such as, getElementById()getElementById()))
responseText – A text string (can be HTML, or responseText – A text string (can be HTML, or even JavaScript code)even JavaScript code)
XHR : CreatingXHR : Creating
XHR : Sending the RequestXHR : Sending the Request
true = asynchronous
XHR : Using a callback XHR : Using a callback handlerhandler
Handling the ResponseHandling the Response Response can be one of the following:Response can be one of the following:
Formatted data (XML, other custom format)Formatted data (XML, other custom format) XMLHttpRequest.responseXMLXMLHttpRequest.responseXML Decouples the server from presentation issuesDecouples the server from presentation issues Could perform XSLT transformation on returned XMLCould perform XSLT transformation on returned XML
HTMLHTML XMLHttpRequest.responseTextXMLHttpRequest.responseText Server generates HTML, script “injects” HTML via Server generates HTML, script “injects” HTML via innerHTMLinnerHTML Server is now concerned with presentationServer is now concerned with presentation
JavaScriptJavaScript XMLHttpRequest.responseTextXMLHttpRequest.responseText Use the Use the eval()eval() JavaScript command JavaScript command Again, our server code is concerned with presentationAgain, our server code is concerned with presentation
AJAX ConcernsAJAX Concerns
SecuritySecurity Browser CompatibilityBrowser Compatibility AccessibilityAccessibility The Back ButtonThe Back Button What if JavaScript is Turned Off?What if JavaScript is Turned Off?
AJAX and the Back ButtonAJAX and the Back Button
Huge usability issueHuge usability issue Returning to the previous state may not be Returning to the previous state may not be
possible when a page is updated possible when a page is updated dynamicallydynamically
Difficult to bookmark on a particular page Difficult to bookmark on a particular page statestate
Really Simple History (RSH) framework Really Simple History (RSH) framework addresses these issuesaddresses these issues http://codinginparadise.org/projects/dhtml_history/README.htmlhttp://codinginparadise.org/projects/dhtml_history/README.html
AJAX Security – Server of Origin AJAX Security – Server of Origin PolicyPolicy
AJAX SecurityAJAX Security
Browsers impose security restrictionsBrowsers impose security restrictions Cannot make requests via the XHR outside Cannot make requests via the XHR outside
of the domain the web page came fromof the domain the web page came from Can set security on IE to get around this (but Can set security on IE to get around this (but
you really don’t want to)you really don’t want to) Mozilla-based browsers require digitally signing Mozilla-based browsers require digitally signing
your script (Yuck!)your script (Yuck!) User must approve going to site.User must approve going to site.
Firefox requires additional codeFirefox requires additional code
AJAX SecurityAJAX Security
Calling third-party web-servicesCalling third-party web-services Application Proxies – Call the web-Application Proxies – Call the web-
service from a servletservice from a servlet Apache Proxy – Configure Apache to Apache Proxy – Configure Apache to
invisibly reroute from the server to the invisibly reroute from the server to the target web service domaintarget web service domain
Encapsulating our AJAX Encapsulating our AJAX LogicLogic
Encapsulating our AJAX Encapsulating our AJAX Logic (cont.)Logic (cont.)
Problems with JavaScriptProblems with JavaScript
Most Java developers know enough Most Java developers know enough JavaScript to be dangerous.JavaScript to be dangerous. If you don’t know what you are doing, If you don’t know what you are doing,
you could cause memory leaks on the you could cause memory leaks on the client machine.client machine.
Most JavaScript functionality can be Most JavaScript functionality can be factored out and encapsulatedfactored out and encapsulated
Ajax Without the JAjax Without the J
It would be nice to encapsulate all of It would be nice to encapsulate all of the JavaScript within our components, the JavaScript within our components, so we don’t have to write any so we don’t have to write any JavaScript.JavaScript.
JavaServer Faces (JSF) provides a way JavaServer Faces (JSF) provides a way to accomplish this.to accomplish this.
JSF and AJAXJSF and AJAX
Why JSF makes senseWhy JSF makes sense- JSF LifecycleJSF Lifecycle- Separates the things that don’t Separates the things that don’t
change (client-side) from the things change (client-side) from the things that do change (server-side)that do change (server-side)
- Echo2 is another Java component-Echo2 is another Java component-based web framework that supports based web framework that supports AJAX.AJAX.
- http://www.nextapp.com/platform/echo2/echo/http://www.nextapp.com/platform/echo2/echo/
Sun BluePrints Solutions Sun BluePrints Solutions CatalogCatalog
Sun defines best practices for Sun defines best practices for integrating AJAX into JSF applications.integrating AJAX into JSF applications.
https://bpcatalog.dev.java.net/nonav/ajax/https://bpcatalog.dev.java.net/nonav/ajax/
Java Studio Creator 2Java Studio Creator 2
Sun has released several AJAX components Sun has released several AJAX components that are available for Creator 2that are available for Creator 2
- Auto-Complete Text Field- Auto-Complete Text Field
- Progress Bar- Progress Bar
- Map Viewer- Map Viewer
- Select Value Text Field- Select Value Text Field
Obtain components via Creator’s “Update Obtain components via Creator’s “Update Center”Center”
Demo – Creator 2 AJAX Demo – Creator 2 AJAX ComponentsComponents
Auto CompleteAuto Complete Map ViewerMap Viewer Drag-and-drop componentsDrag-and-drop components
Code server-based functionalityCode server-based functionality
Demo – DWR (Direct Web Demo – DWR (Direct Web Remoting)Remoting)
Call methods from a POJO that reside Call methods from a POJO that reside on the server.on the server.
Wraps objects in a JavaScript Wraps objects in a JavaScript wrapperwrapper
LinksLinks
Original AJAX Blog by Jesse James GarrettOriginal AJAX Blog by Jesse James Garrett http://adaptivepath.com/publications/essays/archives/000385.phphttp://adaptivepath.com/publications/essays/archives/000385.php
““Fixing AJAX: XMLHttpRequest Considered Fixing AJAX: XMLHttpRequest Considered Harmful” Harmful”
http://www.xml.com/pub/a/2005/11/09/fixing-ajax-xmlhttprequest-considered-harmful.htmlhttp://www.xml.com/pub/a/2005/11/09/fixing-ajax-xmlhttprequest-considered-harmful.html
DWR (Direct Web Remoting) Home PageDWR (Direct Web Remoting) Home Page http://getahead.ltd.uk/dwr/http://getahead.ltd.uk/dwr/
Java AJAX BluePrints Solutions CatalogJava AJAX BluePrints Solutions Catalog https://bpcatalog.dev.java.net/nonav/ajax/index.htmlhttps://bpcatalog.dev.java.net/nonav/ajax/index.html
““AJAX Without the J” BlogAJAX Without the J” Blog http://www.jsfcentral.com/listings/A10500?linkhttp://www.jsfcentral.com/listings/A10500?link
Really Simple History (RSH) FrameworkReally Simple History (RSH) Framework http://codinginparadise.org/projects/dhtml_history/README.htmlhttp://codinginparadise.org/projects/dhtml_history/README.html
ECHO 2 Web FrameworkECHO 2 Web Framework- http://www.nextapp.com/platform/echo2/echo/http://www.nextapp.com/platform/echo2/echo/
