Ajax
Upcoming SlideShare
Loading in...5
×
 

Ajax

on

  • 854 views

 

Statistics

Views

Total Views
854
Views on SlideShare
808
Embed Views
46

Actions

Likes
0
Downloads
15
Comments
0

1 Embed 46

http://jujo00obo2o234ungd3t8qjfcjrs3o6k-a-sites-opensocial.googleusercontent.com 46

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Ajax Ajax Presentation Transcript

    • AJAX Developing Rich Internet Applications -- Luqman Shareef
    •  
    • AJAX at one glance
      • A synchronous J avascript A nd X ML
      • Uses DHTML , DOM, XMLHttpRequest and Javascript
      • Rich Internet Applications
      • Partial Screen update, hence better user experience
      • Faster, and less bandwidth required.
    • AJAX Examples
      • Google Map ( http://maps.google.com )
      • Google Suggest ( http://www.google.com/webhp?complete=1&hl=en )
      • Gmail ( http://gmail.google.com )
      • Yahoo Maps ( http://maps.yahoo.com )
    • Why AJAX is Popular ?
      • Rich Internet Application without Flash
      • Saves Bandwidth
      • Downloads only data that is needed
      • Faster
      • No Plug-in needed at client side.
    • Key Benefits of using AJAX
      • Data-driven (as opposed to page-driven)
        • UI is handled in the client while the server provides data
      • Asynchronous Communication
        • A user can continue to use the application while the client program requests information from the server in the background
    • Synchronous Communication
    • Asynchronous Communication
    •  
    •  
    • Steps of AJAX Operation
      • A client event occurs
      • An XMLHttpRequest object is created
      • The XMLHttpRequest object is configured
      • The XMLHttpRequest object makes an async. request
      • The request is processed by the Server.
      • Server returns an XML document containing the result
      • The XMLHttpRequest object calls the callback() function and processes the result
      • The HTML DOM is updated
    • XMLHttpRequest Methods
      • • open(“HTTP method”, “URL”, syn/asyn)
        • Assigns HTTP method, destination URL, mode
      • • send(content)
        • Sends request including string or DOM object data
      • • abort()
        • Terminates current request
      • • getAllResponseHeaders()
        • Returns headers (labels + values) as a string
      • • getResponseHeader(“header”)
        • Returns value of a given header
      • • setRequestHeader(“label”,”value”)
        • Sets Request Headers before sending
    • XMLHttpRequest Properties
      • onreadystatechange
        • Set with an JavaScript event handler that fires at each change
      • readyState – current status of request
        • 0 = uninitialized
        • 1 = loading
        • 2 = loaded
        • 3 = interactive (some data has been returned)
        • 4 = complete
      • status
        • HTTP Status returned from server: 200 = OK
    • XMLHttpRequest Properties
      • responseText
        • String version of data returned from the server
      • responseXML
        • XML document of data returned from the server
      • statusText
        • Status text returned from server
    • Browsers Which Support XMLHttpRequest
      • Mozilla Firefox 1.0 and above
      • Netscape version 7.1 and above
      • Apple Safari 1.2 and above.
      • Microsoft Internet Exporer 5 and above
      • Konqueror
      • Opera 7.6 and above
    • United Chemical Sales Tool Reworked some of their application w/AJAX
      • Performance Gains
        • Amount of Data Transfer 73% Less
        • Transaction Time (LAN) 32% Less
        • Transaction Time (WAN) 68% Less
      • • Typical Transaction
        • $20/Hour Labor Cost
        • 50,000 transaction/year
        • 36 seconds saved per transaction
        • AJAX Cost Savings: $10,000
          • Hourly Labor * (Seconds Saved * # of Transactions / 3600)
    •  
    • What’s Not to Like…
      • You have to program in Javascript
        • Need libraries + frameworks to make it easier
      • • You have to program against the browser DOM
        • Differences between browser implementations
      • • Lots of HTTP requests to server
        • Requests are smaller however
        • Total bandwidth may not go up
      • • If you want client/server, why not use a real client/server system?
        • .NET can access Web Services on your Java boxes
        • Why not Flash/Flex?
        • Tons of good third-party rich client systems
      • • Testing
        • Cross-browser quirks
        • New browser versions
      • • No Back Button
        • Is this a bad thing?
    • Limitations
      • Increased complexity using Javascript and DHTML
      • Breaks back button support
      • URL's don't change as state changes
      • Cross Browser Issues can be a pain
      • Can't access domains other than the calling domain
      • May be disabled (for security reasons) or not available on some browsers
      • www.ajaxmatters.com
      • www.ajaxian.com
      • www.ajaxpatterns.org
      • www.ajaxtags.com
    • Thank You