Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

4005-713 ` XML Architecture, Tools & Technique ` Presentation


Published on

Published in: Technology
  • Be the first to comment

4005-713 ` XML Architecture, Tools & Technique ` Presentation

  1. 1. AJAX: Asynchronous JavaScript and XML By: Alex Maskovyak & Young Suk Moon 4005-713 ` XML Architecture, Tools & Techniques ` 01/14/2009
  2. 2. Outline <ul><li>Overview </li></ul><ul><ul><li>Examples </li></ul></ul><ul><li>Background </li></ul><ul><ul><li>Web Application Model </li></ul></ul><ul><ul><li>Problems </li></ul></ul><ul><ul><li>Other alternatives </li></ul></ul><ul><li>Technology </li></ul><ul><li>Demo </li></ul><ul><li>Web Presence </li></ul><ul><li>Sources </li></ul><ul><li>Questions </li></ul>
  3. 3. Overview <ul><li>Group of web development techniques/technologies </li></ul><ul><li>Used to create interactive “web applications” </li></ul><ul><li>Technical jargon </li></ul><ul><li>Backbone behind “web 2.0” </li></ul>
  4. 4. Overview: Examples <ul><li>Google suggest: dynamic search suggestions </li></ul><ul><li>Google Gmail: rich interface for email </li></ul><ul><li>Google maps : interactive atlas </li></ul><ul><li> : social bookmarking </li></ul><ul><li>Facebook : social gathering site </li></ul>
  5. 5. Background: Web Application Model <ul><li>Request/response communication mode </li></ul><ul><ul><li>User (through browser) requests information </li></ul></ul><ul><ul><li>Browser waits for server response </li></ul></ul><ul><ul><li>Server responds with information </li></ul></ul><ul><ul><li>Browser refreshes the page </li></ul></ul>
  6. 6. Background: Problems <ul><li>Unfriendly user experience </li></ul><ul><li>Slow </li></ul><ul><li>Bandwidth/server intensive </li></ul>
  7. 7. Alternatives <ul><li>Load everything on page load and display only what is needed/when it is needed (hide everything else) </li></ul><ul><ul><li>Good </li></ul></ul><ul><ul><ul><li>improves user experience </li></ul></ul></ul><ul><ul><ul><li>reduces server requests/loads </li></ul></ul></ul><ul><ul><li>Bad </li></ul></ul><ul><ul><ul><li>does not solve total bandwidth server problems </li></ul></ul></ul><ul><ul><ul><li>resource wasteful on the local machine </li></ul></ul></ul>
  8. 8. Alternatives <ul><li>Java applets </li></ul><ul><ul><li>Good </li></ul></ul><ul><ul><ul><li>interactive web applications </li></ul></ul></ul><ul><ul><ul><li>reduces server requests/loads </li></ul></ul></ul><ul><ul><li>Bad </li></ul></ul><ul><ul><ul><li>large and slow to load </li></ul></ul></ul><ul><ul><ul><li>requires browser plugin and compatible JVM </li></ul></ul></ul><ul><ul><ul><li>breaks web page continuity (look and feel may differ from page) </li></ul></ul></ul>
  9. 9. Alternatives <ul><li>Flash applets </li></ul><ul><ul><li>Good </li></ul></ul><ul><ul><ul><li>highly interactive web applications </li></ul></ul></ul><ul><ul><ul><li>reduces server requests/load </li></ul></ul></ul><ul><ul><li>Bad </li></ul></ul><ul><ul><ul><li>slow to load </li></ul></ul></ul><ul><ul><ul><li>requires browser plugin </li></ul></ul></ul><ul><ul><ul><li>Flash development tools aren’t free </li></ul></ul></ul>
  10. 10. Alternatives <ul><li>AJAX… </li></ul>
  11. 11. AJAX Technology <ul><li>Asynchronous JavaScript and XML? </li></ul><ul><li>General ingredients: </li></ul><ul><ul><li>Any client-side scripting language (JavaScript, VBScript) </li></ul></ul><ul><ul><li>Any type of information container (XML, JSON, pre-formatted HTML, plain text) </li></ul></ul><ul><ul><li>Asynchronous transfer mechanism (Javascript’s XMLHttpRequest) </li></ul></ul><ul><ul><li>Server side scripting (PHP, ASP, JSP) </li></ul></ul>
  12. 12. AJAX Technology (XMLHttpRequest) <ul><li>JavaScript class </li></ul><ul><li>Created by Microsoft, adapted by other browsers, and became a standard </li></ul><ul><li>var xmlHttp = new XMLHttpRequest(); </li></ul><ul><li>“GET”, “someURL”, true); </li></ul><ul><li>xmlHttp.send(“somedata”); </li></ul><ul><li>xmlHttp.onreadystatechange = someFunction; </li></ul>
  13. 13. XML <ul><li>var xmldoc = xmlHttp.responseXML.documentElement; </li></ul><ul><li>Organized structured data provides an excellent medium for information exchange </li></ul><ul><li>DOM and DOM events can be leveraged </li></ul><ul><li>XSLT can be leveraged </li></ul>
  14. 14. AJAX Advantages <ul><li>More responsive and interactive pages </li></ul><ul><ul><li>Browser responds quickly to additional user commands since it doesn’t hang on server response </li></ul></ul><ul><li>Reduces bandwidth </li></ul><ul><ul><li>Common content across pages stays the same </li></ul></ul><ul><ul><li>Only updated content need be requested </li></ul></ul><ul><li>Reduces server connections </li></ul><ul><ul><li>Many object will only be requested once (scripts, stylesheets, etc) </li></ul></ul><ul><li>Compatible with many browsers </li></ul><ul><ul><li>No plugins required </li></ul></ul>
  15. 15. AJAX Disadvantages <ul><li>Creating XMLHttpRequest objects differs by browser </li></ul><ul><li>Browser back/forward buttons not useful </li></ul><ul><li>Bookmarking can be difficult </li></ul><ul><li>Search engine indexing is difficult </li></ul><ul><li>Browser must support JavaScript and it must be enabled </li></ul><ul><li>Lack of standards, tools, and best practices </li></ul>
  16. 16. Demo <ul><li>Present web-site demonstration. </li></ul>
  17. 17. Web Presence <ul><li>Link: </li></ul>
  18. 18. Sources <ul><li> </li></ul><ul><li> </li></ul><ul><li> </li></ul><ul><li> </li></ul><ul><li> </li></ul><ul><li> arena-web20-fight </li></ul>