AJAX A Brief Introduction to AJAX
AJAX Defined <ul><li>Jesse James Garrett  2/18/05 </li></ul><ul><ul><li>http://tinyurl.com/7xzse  – Hype Ground 0 </li></u...
AJAX? <ul><li>Asynchronous JavaScript and XML  </li></ul><ul><ul><li>Doesn’t have to be XML being transmitted – can be any...
Better than Flash? <ul><li>AJAX and Flash Compared </li></ul><ul><ul><li>http://getahead.ltd.uk/ajax/ajax-flash-compared <...
AJAX 101 <ul><li>History: “Microsoft first implemented the XMLHttpRequest object in Internet Explorer 5 for Windows as an ...
AJAX 101: XMLHttpRequest  <ul><li>XMLHttpRequest performs an HTTP GET or POST in the background (asynchronously) then call...
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 w...
A Client/Server Computing Model Client Computer Browser Server Computer HTTP Service HTTP REQUEST HTTP RESPONSE (URL,Post,...
Client Browser (state A) HTTP Server HTTP REQUEST HTTP RESPONSE  New Page Default Synchronous Processing Scenario Client B...
Client Browser (state D) Client Browser (state A) HTTP Server REQUEST RESPONSE   –  New Page Asynchronous Processing Scena...
AJAX Gotchas <ul><li>Back Button doesn’t work “right” </li></ul><ul><li>Bookmarks do not work “right” </li></ul><ul><li>Ma...
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></...
Book: AJAX in Action <ul><li>Ajax in Action </li></ul><ul><ul><li>by Dave Crane and Eric Pascarello with Darren James </li...
Blog:  Ajaxian.com <ul><li>Ajaxian.com has good podcast episode summaries online </li></ul><ul><li>Episode 11  </li></ul><...
Credits <ul><li>Professor Stephen K. Kwan </li></ul><ul><ul><li>http://www.cob.sjsu.edu/kwan_s </li></ul></ul><ul><li>AJAX...
Upcoming SlideShare
Loading in...5
×

01 Ajax Intro

890

Published on

AJAX Intro

Published in: Education, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
890
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
21
Comments
0
Likes
1
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>
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×