01 Ajax Intro


Published on

AJAX Intro

Published in: Education, Technology
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • 01 Ajax Intro

    1. 1. AJAX A Brief Introduction to AJAX
    2. 2. AJAX Defined <ul><li>Jesse James Garrett 2/18/05 </li></ul><ul><ul><li>http://tinyurl.com/7xzse – Hype Ground 0 </li></ul></ul><ul><ul><li>Defines AJAX: </li></ul></ul><ul><ul><ul><li>“ Ajax isn’t a technology. It’s really several technologies, each flourishing in its own right, coming together in powerful new ways. Ajax incorporates: </li></ul></ul></ul><ul><ul><ul><li>standards-based presentation using XHTML and CSS; </li></ul></ul></ul><ul><ul><ul><li>dynamic display and interaction using the Document Object Model; </li></ul></ul></ul><ul><ul><ul><li>data interchange and manipulation using XML and XSLT; </li></ul></ul></ul><ul><ul><ul><li>asynchronous data retrieval using XMLHttpRequest; </li></ul></ul></ul><ul><ul><ul><li>and JavaScript binding everything together.” </li></ul></ul></ul>
    3. 3. AJAX? <ul><li>Asynchronous JavaScript and XML </li></ul><ul><ul><li>Doesn’t have to be XML being transmitted – can be any data e.g. HTML </li></ul></ul><ul><li>AJAX has become the new popular umbrella term that includes DHTML and Web 2.0 types of websites. Examples include: </li></ul><ul><ul><li>Google Maps, Gmail.com, Google Suggest, Digg.com, </li></ul></ul>
    4. 4. Better than Flash? <ul><li>AJAX and Flash Compared </li></ul><ul><ul><li>http://getahead.ltd.uk/ajax/ajax-flash-compared </li></ul></ul><ul><ul><li>Depends on the needs of the application </li></ul></ul>
    5. 5. AJAX 101 <ul><li>History: “Microsoft first implemented the XMLHttpRequest object in Internet Explorer 5 for Windows as an ActiveX object. Engineers on the Mozilla project implemented a compatible native version for Mozilla 1.0 (and Netscape 7). Apple has done the same starting with Safari 1.2.” </li></ul><ul><li>AJAX is special because so many browsers support it out of the box. </li></ul>
    6. 6. AJAX 101: XMLHttpRequest <ul><li>XMLHttpRequest performs an HTTP GET or POST in the background (asynchronously) then calls a JavaScript function when it’s done. </li></ul><ul><li>The XMLHttpRequest is a JavaScript object that offers a convenient way for web pages to get information from servers without refreshing themselves. </li></ul>
    7. 7. AJAX 101: XMLHttpRequest <ul><li>The benefit to end users is that they don't have to type as much and they don't have to wait as long. </li></ul><ul><ul><li>For example, having the user's city and state show up in a webpage automatically after the ZIP code has been typed in is a big time saver. </li></ul></ul><ul><li>A good way to think of the XMLHttpRequest object is as you would think of the JavaScript Image object. When a mouseover is performed the next images loads without reloading the page. </li></ul>
    8. 8. A Client/Server Computing Model Client Computer Browser Server Computer HTTP Service HTTP REQUEST HTTP RESPONSE (URL,Post,Get,..) (XHTML...) A State-less Environment
    9. 9. Client Browser (state A) HTTP Server HTTP REQUEST HTTP RESPONSE New Page Default Synchronous Processing Scenario Client Browser (state B) (state A) (state A + … = state B)
    10. 10. Client Browser (state D) Client Browser (state A) HTTP Server REQUEST RESPONSE – New Page Asynchronous Processing Scenario Client Browser (state C) Client Browser (state B) REQUEST/RESPONSE REQUEST/RESPONSE Using XMLHttpRequest Object
    11. 11. AJAX Gotchas <ul><li>Back Button doesn’t work “right” </li></ul><ul><li>Bookmarks do not work “right” </li></ul><ul><li>Many “solutions” are starting to come out </li></ul><ul><ul><li>How to Handle Bookmarks and Back Buttons </li></ul></ul><ul><ul><li>by Brad Neuberg http://tinyurl.com/agpeg </li></ul></ul><ul><li>JavaScript Versions and History </li></ul><ul><ul><li>http://getahead.ltd.uk/technotes/JSVersions </li></ul></ul>
    12. 12. What to do next <ul><li>Read and practice </li></ul><ul><ul><li>Use XAMPP or buy a cheap web hosting account. </li></ul></ul><ul><ul><ul><li>XAMPP is a free easily installable Web development environment for Windows, Linux & OS X http://apachefriends.org </li></ul></ul></ul><ul><ul><li>Visit live AJAX demo sites: </li></ul></ul><ul><ul><li>http://ajaxrain.com </li></ul></ul>
    13. 13. Book: AJAX in Action <ul><li>Ajax in Action </li></ul><ul><ul><li>by Dave Crane and Eric Pascarello with Darren James </li></ul></ul><ul><ul><li>http://www.manning.com/books/crane/ </li></ul></ul><ul><ul><li>Screencasts at http://tinyurl.com/bebmh </li></ul></ul><ul><ul><ul><li>Four Minute Overview: </li></ul></ul></ul><ul><ul><ul><li>Twenty-two Minute walkthru: </li></ul></ul></ul>
    14. 14. Blog: Ajaxian.com <ul><li>Ajaxian.com has good podcast episode summaries online </li></ul><ul><li>Episode 11 </li></ul><ul><ul><li>Rate it up by order of magnitude – that’s ROI </li></ul></ul><ul><ul><li>Scriptaclous guy </li></ul></ul><ul><ul><li>XML and DOM manip is really slow only use if you have pre-existing XML api </li></ul></ul><ul><ul><li>Prototype extends object and array and this causes problems with other libraries. </li></ul></ul>
    15. 15. Credits <ul><li>Professor Stephen K. Kwan </li></ul><ul><ul><li>http://www.cob.sjsu.edu/kwan_s </li></ul></ul><ul><li>AJAXIAN </li></ul><ul><ul><li>http://ajaxian.com/ </li></ul></ul><ul><li>AJAX Matters </li></ul><ul><ul><li>http://ajaxmatters.com/ </li></ul></ul>