AJAX:  Asynchronous JavaScript and XML By: Alex Maskovyak & Young Suk Moon 4005-713 ` XML Architecture, Tools & Techniques...
Outline <ul><li>Overview </li></ul><ul><ul><li>Examples </li></ul></ul><ul><li>Background </li></ul><ul><ul><li>Web Applic...
Overview <ul><li>Group of web development techniques/technologies </li></ul><ul><li>Used to create interactive “web applic...
Overview: Examples <ul><li>Google suggest: dynamic search suggestions </li></ul><ul><li>Google Gmail: rich interface for e...
Background: Web Application Model <ul><li>Request/response communication mode </li></ul><ul><ul><li>User (through browser)...
Background: Problems <ul><li>Unfriendly user experience </li></ul><ul><li>Slow </li></ul><ul><li>Bandwidth/server intensiv...
Alternatives <ul><li>Load everything on page load and display only what is needed/when it is needed (hide everything else)...
Alternatives  <ul><li>Java applets </li></ul><ul><ul><li>Good </li></ul></ul><ul><ul><ul><li>interactive web applications ...
Alternatives <ul><li>Flash applets </li></ul><ul><ul><li>Good </li></ul></ul><ul><ul><ul><li>highly interactive web applic...
Alternatives <ul><li>AJAX… </li></ul>
AJAX Technology <ul><li>Asynchronous JavaScript and XML? </li></ul><ul><li>General ingredients: </li></ul><ul><ul><li>Any ...
AJAX Technology (XMLHttpRequest) <ul><li>JavaScript class </li></ul><ul><li>Created by Microsoft, adapted by other browser...
XML <ul><li>var xmldoc = xmlHttp.responseXML.documentElement; </li></ul><ul><li>Organized structured data provides an exce...
AJAX Advantages <ul><li>More responsive and interactive pages </li></ul><ul><ul><li>Browser responds quickly to additional...
AJAX Disadvantages <ul><li>Creating XMLHttpRequest objects differs by browser </li></ul><ul><li>Browser back/forward butto...
Demo <ul><li>Present web-site demonstration.  </li></ul>
Web Presence <ul><li>Link:  http://www.cs.rit.edu/~yxm9371/713/ajax.html </li></ul>
Sources <ul><li>http://www.w3schools.com/Ajax/default.asp </li></ul><ul><li>http://en.wikipedia.org/wiki/Ajax_(programming...
Upcoming SlideShare
Loading in …5
×

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

1,432 views

Published on

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

No Downloads
Views
Total views
1,432
On SlideShare
0
From Embeds
0
Number of Embeds
23
Actions
Shares
0
Downloads
19
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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>Del.icio.us : 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>xmlHttp.open(“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: http://www.cs.rit.edu/~yxm9371/713/ajax.html </li></ul>
  18. 18. Sources <ul><li>http://www.w3schools.com/Ajax/default.asp </li></ul><ul><li>http://en.wikipedia.org/wiki/Ajax_(programming) </li></ul><ul><li>http://www.ajaxf1.com/tutorial/ajax-php.html </li></ul><ul><li>http://www.ajaxmatters.com/ </li></ul><ul><li>http://dot1ne.com/journal/ajax-vs-flash-round-2- </li></ul><ul><li> arena-web20-fight </li></ul>

×