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

01 Ajax Intro

on

  • 1,225 views

AJAX Intro

AJAX Intro

Statistics

Views

Total Views
1,225
Views on SlideShare
1,225
Embed Views
0

Actions

Likes
1
Downloads
19
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

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.

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

01 Ajax Intro 01 Ajax Intro Presentation Transcript

  • AJAX A Brief Introduction to AJAX
  • 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.”
  • 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,
  • Better than Flash?
    • AJAX and Flash Compared
      • http://getahead.ltd.uk/ajax/ajax-flash-compared
      • Depends on the needs of the application
  • 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.
  • 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.
  • 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.
  • A Client/Server Computing Model Client Computer Browser Server Computer HTTP Service HTTP REQUEST HTTP RESPONSE (URL,Post,Get,..) (XHTML...) A State-less Environment
  • 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)
  • 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
  • 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
  • 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
  • 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:
  • 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.
  • Credits
    • Professor Stephen K. Kwan
      • http://www.cob.sjsu.edu/kwan_s
    • AJAXIAN
      • http://ajaxian.com/
    • AJAX Matters
      • http://ajaxmatters.com/