01 Ajax Intro
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,295
On Slideshare
1,295
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
20
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

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
    • AJAXIAN
      • http://ajaxian.com/
    • AJAX Matters
      • http://ajaxmatters.com/