Your SlideShare is downloading. ×
AJAX (Asynchronous Javascript and XML)
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

AJAX (Asynchronous Javascript and XML)

1,292
views

Published on


1 Comment
1 Like
Statistics
Notes
  • Very informative slide. Its really helpful for me and helped me lot to complete my task. Thanks for sharing with us. I had found another nice post over the internet which also explained very well about AJAX. For more details of that post please check out this link...
    http://mindstick.com/Articles/a2468378-03d5-400b-b888-19f79c5086aa/?AJAX%20%28Asynchronous%20JavaScript%20and%20XML%29
    It,s also helped me too much.
    Thanks Everyone!!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
1,292
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
27
Comments
1
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. AJAX…
    • Presented By
    • Luis Perez
    • PlatinumSolutions, Inc.
    • Thursday, May 5 th , 2005
    … Not Your Mom’s Favorite Cleaner (An Approach to Web Applications)
  • 2. AJAX…
    • Myth or Fact:
    • “… rich user interfaces can not be delivered with current browser technology…”
  • 3. AJAX…
    • What is a Rich User Interface?
      • Typically what we found in desktop-based applications (fat clients)
      • Highly Interactive
      • Features:
        • Complex set of widgets (e.g., tree control, slider)
        • Drag-and-drop
  • 4. AJAX…
    • Browser-based Technologies:
      • DHTML / JavaScript
      • Java Applets
      • ActiveX (Microsoft)
      • Flash-based (Flex, Lazlo)
      • XUL, SVG
  • 5. AJAX…
    • Past Issues:
      • Browser Wars (circa 1995-2000)
        • A lot of innovations happened in this period as each browser tried to outdo the other
        • Microsoft’s IE ran opposition to the ground
      • DHTML Incompatibilities
        • Differences in DOM Model (IE vs. Netscape)
  • 6. AJAX…
    • Recent Improvements
      • DOM & DOM-Compliant Browsers
        • Level 2 / Level 3 Support
        • http://www.w3.org/2003/02/06-dom-support.html
      • XMLHttpRequest Object
  • 7. AJAX…
    • DOM Improvements
      • Create new elements on the fly –
        • No more using “document.write” to insert HTML and CSS into page
      • Insert new text, and change or remove text from any element without resorting to “innerHTML” or “document.write”
  • 8. AJAX…
    • DOM Improvements (cont.)
      • Move whole parts of the document around, or remove parts as fragments
      • All these new methods should work the same in any DOM-compliant browser
        • No more browser sniffing
        • No need to build different versions of the same page for different browsers
  • 9. AJAX…
    • XMLHttpRequest Object
      • Has been around for a few years and “ most folks did not know about it ”
        • Introduced by Microsoft about 5 years ago
        • Opera, Safari and Mozilla have all now implemented a version that is accessible through JavaScript
  • 10. AJAX…
    • XMLHttpRequest Object (cont.)
      • Allows scripting of remote calls (i.e., “web remoting”) and dynamically update of page data without having to do a full page refresh
      • Key Benefit:
        • Ability to process asynchronous requests or update a page without requiring a full rebuild of the page
  • 11. AJAX…
    • What is AJAX?
      • Asynchronous JavaScript and XML
        • Phrase coined by Jesse James Garret, from Adaptive Path
      • A framework for building rich “web” UI
      • A standard is in the works from the W3C
  • 12. AJAX…
    • AJAX incorporates:
      • Standards-based presentation using XHTML and CSS
      • Dynamic display and interaction using the Document Object Model (DOM)
      • Asynchronous data retrieval using the XMLHttpRequest object
      • JavaScript binding everything together
  • 13. AJAX…
    • Examples of AJAX-enabled Sites
      • Google Mail (GMail)
      • Google Maps (maps.google.com)
      • Ta-Da List (www.tadalist.com)
      • Flickr (www.flickr.com)
  • 14. AJAX… Anatomy of an AJAX Interaction (Source: Java BluePrints Solutions Catalog)
  • 15. AJAX…
    • Creating a XMLHttpRequest Object:
      • Microsoft’s Internet Explorer
        • xmlhttp = new ActiveXObject(“Msxml2.XMLHTTP”);
        • xmlhttp = new ActiveXObject(“Microsoft.XMLHTTP”);
      • Mozilla and Safari
        • xmlhttp = new XMLHttpRequest();
  • 16. AJAX…
    • How do I make a request?
      • Tell the XMLHttpRequest object what type of HTTP request to make
        • GET, POST, HEAD
      • Specify the target URL
      • Provide a “callback” function to be called as the request is being made
      • Information to be sent in the body of the request (if any)
  • 17. AJAX…
    • Sample Code
    • var req;
    • function validate() {
    • var idField = document.getElementById("idField");
    • var url = "validate?id=" + escape(idField.value);
    • if (window.XMLHttpRequest) {
    • req = new XMLHttpRequest();
    • } else if (window.ActiveXObject) {
    • req = new ActiveXObject("Microsoft.XMLHTTP");
    • }
    • req.open("GET", url, true);
    • req.onreadystatechange = callback;
    • req.send(null);
    • }
    • function callback() {
    • if (req.readyState == 4) {
    • if (req.status == 200) {
    • // update the HTML DOM based on result
    • }
    • }
    • }
  • 18. AJAX…
    • Demos
      • http://jibbering.com/2002/4/add.1
      • Echo 2 web framework - ( http:// demo.nextapp.com/InteractiveTest/ia )
  • 19. AJAX…
    • AJAX Use Cases: ( Source: Java BluePrints Catalog )
      • Auto-Completion
        • Provide a simplified means of data navigation as the user enters a request in an HTML form
      • Progress Bar
        • Track the progress on the client of a server-side operation without refreshing the HTML page
      • Real-time Form Validation
        • Perform server-side validation of form data in an HTML page without refreshes
      • Refreshing Data
        • Provide up to date data to the HTML page
  • 20. AJAX…
    • Drawbacks / Issues:
      • JavaScript must be enabled on the browser
      • Complexity
      • Security?
      • Debugging and Testing
      • Maintainability
      • Support only in “modern” browsers
  • 21. AJAX…
    • What’s Ahead?
      • Frameworks and patterns will emerge as developers gain more experience using the AJAX interaction model
        • JSON-RPC-Java
        • Direct Web Remoting (DWR)
      • Incorporation into existing and future web application frameworks
        • Struts-Shale
        • JSF 2.0
  • 22. AJAX…
    • JSON-RPC-Java
      • A Java implementation of the JSON-RPC protocol
      • JSON-RPC
        • is a simple remote procedure call protocol similar to XML-RPC although it uses the lightweight JSON format instead of XML
      • JSON (JavaScript Object Notation)
        • is a lightweight data-interchange format
  • 23. AJAX…
    • JSON-RPC-Java Highlights:
      • Dynamically call server-side Java methods from JavaScript DHTML web applications. No Page reloading.
      • Transparently maps Java objects to JavaScript objects.
      • Lightweight protocol similar to XML-RPC although much faster.
      • Supports Internet Explorer, Mozilla, Firefox, Safari, Opera and Konqueror
  • 24. AJAX…
    • JSON-RPC-Java Components
      • Server Side
        • jsonrpc.jar
          • JSONRPCServlet
          • JSONRPCBridge
      • Client Side
        • jsonrpc.js
          • JSONRpcClient
          • JSONRpcClient.Exception
  • 25. AJAX…
    • JSON-RPC-Java Components (cont.)
      • JSONRPCServlet
        • handles JSON-RPC requests over HTTP;
        • dispatches requests to a JSONRPCBridge instance registered in the HttpSession object;
        • web.xml configuration:
        • <servlet>
        • <servlet-name>com.metaparadigm.jsonrpc.JSONRPCServlet</servlet-name>
        • <servlet-class>com.metaparadigm.jsonrpc.JSONRPCServlet</servlet-class>
        • </servlet>
        • <servlet-mapping>
        • <servlet-name>com.metaparadigm.jsonrpc.JSONRPCServlet</servlet-name>
        • <url-pattern>/JSON-RPC</url-pattern>
        • </servlet-mapping>
  • 26. AJAX…
    • JSON-RPC-Java Components (cont.)
      • JSONRPCBridge
        • holds references to exported objects;
        • decodes and dispatches method calls to them;
        • implemented as session specific to improve the security of applications by allowing exporting of object methods only to specific users. To put an instance of the bridge in the HttpSession object:
          • from a JSP use the <jsp:useBean …> tag
          • from a servlet use the HttpSession API
  • 27. AJAX…
    • JSON-RPC-Java Components (cont.)
      • JSONRPCBridge
        • To export an object to call methods on:
          • registerObject(String name, Object o);
          • registerClass(String name, Class clazz);
  • 28. AJAX…
    • JSON-RPC-Java Components (cont.)
      • JSONRpcClient
        • constructs a transparent proxy providing method access to all methods on the JSON-RPC server
        • Constructors:
          • jsonrpc = new JSONRpcClient(&quot;/webapp/JSON-RPC/&quot;)
          • jsonrpc = new JSONRpcClient(&quot;/webapp/JSON-RPC/&quot;, user, pass)
  • 29. AJAX…
    • JSON-RPC-Java Components (cont.)
      • JSONRpcClient
        • Invocation Modes:
          • Synchronous
            • res = jsonrpc.test.echo(&quot;hello&quot;);
          • Asynchronous
            • jsonrpc.test.echo(cb, &quot;hello&quot;);
            • Callback method:
            • function cb(result, exception) {
            • // do stuff here ...
            • }
  • 30. AJAX…
    • Final Thoughts
      • AJAX is a very powerful technique for adding richness to a web interface
      • Relies mostly on standards-based technologies
      • Developers are taking notice
      • Use it with care
  • 31. AJAX…
    • References
      • http:// www.theserverside.com/articles/article.tss?l =TSSJS2005_Thursday#nextgen
      • http://www.adaptivepath.com/publications/essays/archives/000385.php
      • https:// bpcatalog.dev.java.net/nonav/ajax/index.html
      • http://www.omnytex.com/articles/xhrstruts
      • http://www.scottandrew.com/weblog/articles/dom_1
      • http://oss.metaparadigm.com/jsonrpc/

×