01 Ajax Intro
Upcoming SlideShare
Loading in...5

Like this? Share it with your network


01 Ajax Intro



AJAX Intro

AJAX Intro



Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



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.

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

01 Ajax Intro Presentation Transcript

  • 1. AJAX A Brief Introduction to AJAX
  • 2. AJAX Defined
    • Jesse James Garrett 2/18/05
      • http://tinyurl.com/7xzse – Hype Ground 0
      • Defines AJAX:
        • “ Ajax isn’t a technology. It’s really several technologies, each flourishing in its own right, coming together in powerful new ways. Ajax incorporates:
        • standards-based presentation using XHTML and CSS;
        • dynamic display and interaction using the Document Object Model;
        • data interchange and manipulation using XML and XSLT;
        • asynchronous data retrieval using XMLHttpRequest;
        • and JavaScript binding everything together.”
  • 3. AJAX?
    • Asynchronous JavaScript and XML
      • Doesn’t have to be XML being transmitted – can be any data e.g. HTML
    • AJAX has become the new popular umbrella term that includes DHTML and Web 2.0 types of websites. Examples include:
      • Google Maps, Gmail.com, Google Suggest, Digg.com,
  • 4. Better than Flash?
    • AJAX and Flash Compared
      • http://getahead.ltd.uk/ajax/ajax-flash-compared
      • Depends on the needs of the application
  • 5. AJAX 101
    • 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.”
    • AJAX is special because so many browsers support it out of the box.
  • 6. AJAX 101: XMLHttpRequest
    • XMLHttpRequest performs an HTTP GET or POST in the background (asynchronously) then calls a JavaScript function when it’s done.
    • The XMLHttpRequest is a JavaScript object that offers a convenient way for web pages to get information from servers without refreshing themselves.
  • 7. AJAX 101: XMLHttpRequest
    • The benefit to end users is that they don't have to type as much and they don't have to wait as long.
      • 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.
    • 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.
  • 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. 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. 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. AJAX Gotchas
    • Back Button doesn’t work “right”
    • Bookmarks do not work “right”
    • Many “solutions” are starting to come out
      • How to Handle Bookmarks and Back Buttons
      • by Brad Neuberg http://tinyurl.com/agpeg
    • JavaScript Versions and History
      • http://getahead.ltd.uk/technotes/JSVersions
  • 12. What to do next
    • Read and practice
      • Use XAMPP or buy a cheap web hosting account.
        • XAMPP is a free easily installable Web development environment for Windows, Linux & OS X http://apachefriends.org
      • Visit live AJAX demo sites:
      • http://ajaxrain.com
  • 13. Book: AJAX in Action
    • Ajax in Action
      • by Dave Crane and Eric Pascarello with Darren James
      • http://www.manning.com/books/crane/
      • Screencasts at http://tinyurl.com/bebmh
        • Four Minute Overview:
        • Twenty-two Minute walkthru:
  • 14. Blog: Ajaxian.com
    • Ajaxian.com has good podcast episode summaries online
    • Episode 11
      • Rate it up by order of magnitude – that’s ROI
      • Scriptaclous guy
      • XML and DOM manip is really slow only use if you have pre-existing XML api
      • Prototype extends object and array and this causes problems with other libraries.
  • 15. Credits
    • Professor Stephen K. Kwan
      • http://www.cob.sjsu.edu/kwan_s
      • http://ajaxian.com/
    • AJAX Matters
      • http://ajaxmatters.com/