Your SlideShare is downloading. ×
01 Ajax Intro
01 Ajax Intro
01 Ajax Intro
01 Ajax Intro
01 Ajax Intro
01 Ajax Intro
01 Ajax Intro
01 Ajax Intro
01 Ajax Intro
01 Ajax Intro
01 Ajax Intro
01 Ajax Intro
01 Ajax Intro
01 Ajax Intro
01 Ajax Intro
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

01 Ajax Intro


Published on

AJAX Intro

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide
  • Transcript

    • 1. AJAX A Brief Introduction to AJAX
    • 2. AJAX Defined
      • Jesse James Garrett 2/18/05
        • – 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,, Google Suggest,,
    • 4. Better than Flash?
      • AJAX and 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
      • JavaScript Versions and History
    • 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
        • Visit live AJAX demo sites:
    • 13. Book: AJAX in Action
      • Ajax in Action
        • by Dave Crane and Eric Pascarello with Darren James
        • Screencasts at
          • Four Minute Overview:
          • Twenty-two Minute walkthru:
    • 14. Blog:
      • 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
      • AJAXIAN
      • AJAX Matters