Your SlideShare is downloading. ×
0
AJAX Developing  Rich Internet Applications -- Luqman Shareef
 
AJAX at one glance <ul><li>A synchronous  J avascript  A nd  X ML </li></ul><ul><li>Uses DHTML , DOM, XMLHttpRequest and J...
AJAX Examples <ul><li>Google Map  ( http://maps.google.com ) </li></ul><ul><li>Google Suggest  ( http://www.google.com/web...
Why AJAX is Popular ? <ul><li>Rich Internet Application without Flash </li></ul><ul><li>Saves Bandwidth </li></ul><ul><li>...
Key Benefits of using AJAX <ul><li>Data-driven  (as opposed to page-driven) </li></ul><ul><ul><li>UI is handled in the cli...
Synchronous Communication
Asynchronous Communication
 
 
Steps of AJAX Operation <ul><li>A client event occurs </li></ul><ul><li>An XMLHttpRequest object is created </li></ul><ul>...
XMLHttpRequest Methods <ul><li>•  open(“HTTP method”, “URL”, syn/asyn) </li></ul><ul><ul><li>Assigns HTTP method, destinat...
XMLHttpRequest Properties <ul><li>onreadystatechange </li></ul><ul><ul><li>Set with an JavaScript event handler that fires...
XMLHttpRequest Properties <ul><li>responseText </li></ul><ul><ul><li>String version of data returned from the server </li>...
Browsers Which Support XMLHttpRequest <ul><li>Mozilla Firefox 1.0 and above </li></ul><ul><li>Netscape version 7.1 and abo...
United Chemical Sales Tool   Reworked some of their application w/AJAX <ul><li>Performance Gains </li></ul><ul><ul><li>Amo...
 
What’s Not to Like… <ul><li>You have to program in Javascript </li></ul><ul><ul><li>Need libraries + frameworks to make it...
Limitations <ul><li>Increased complexity using Javascript and DHTML </li></ul><ul><li>Breaks back button support  </li></u...
<ul><li>www.ajaxmatters.com </li></ul><ul><li>www.ajaxian.com </li></ul><ul><li>www.ajaxpatterns.org </li></ul><ul><li>www...
Thank You
Upcoming SlideShare
Loading in...5
×

Ajax

591

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
591
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
16
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Ajax"

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

    Clipping is a handy way to collect important slides you want to go back to later.

×