Basics of AJAX and server communication techniques

1. AJAX Basics
Server Communication
Presentation by Mike Wilcox
January 6th, 2009

2. What is AJAX?
• Term coined by Jesse James Garrett of Adaptive Path
in February 2005
• Originally stood for “Asynchronous JavaScript and
XML”
• Now understood to encompass a range of techniques
• Usually features HTTP communication without client
refresh
• Consider: Changing the DOM without changing
pages
http://www.adaptivepath.com/ideas/essays/archives/000385.php

3. Browsers

4. Internet Explorer
• Let's hear it for IE!
• Actually, IE 4.0 was a tremendous achievement
done by a Microsoft “Dream Team”
• Introduced AJAX: DOM manipulation, XHR
• After winning the browser war with Netscape,
the Dream Team disbanded
• Killer App:
• It's forced upon Windows users

5. FireFox
• First real competition for IE since Netscape
(about 20% of the market)
• Built by the Mozilla Corporation, with Netscape
code and developers
• Killer App:
• Being Open Source made it popular early on
with users
• FireBug has made FireFox the primary
platform for which to develop
http://en.wikipedia.org/wiki/Browser_market_share

6. WebKit
• Used by Safari, Google Chrome, AIR, iPhone,
Android, Nokia (much more)
• Ported from KHTML by the WebKit Team with
help from Apple
• Mike originally laughed at the silly little
wannabe
• Killer App:
• Insane performance

7. Why Ajax - i.e., not Flash
• Standardized UI (the reason for Flex)
• Open Source
• View Source
• Human-readable Text-based Transports are
simpler
• No compiling
• Part of the Open Web

8. What is “Open Web”??
• Cross-Platform Standards
• No Vendor Lock-in
• Anyone Can Innovate
• Powerful, Universal Clients
• Open Source Implementations
• Mashable, Searchable, and Integrated
http://codinginparadise.org/weblog/index.html

9. Same Origin Policy
The same origin policy is an important security measure for client-side scripting (mostly JavaScript). It
prevents a document or script loaded from one "origin" from getting or setting properties of a document
from a different "origin".
http://en.wikipedia.org/wiki/Same_origin_policy

10. Server
Communication
Methods

11. XmlHttpRequest

12. XmlHttpRequest
• Pros:
• Standard
• Native Browser Method
• Handles All REST calls
• Cons:
• No cross domain

13. iFrame

14. iFrame
• Pros:
• Used primarily for binary transports, like File
Uploads
• Cons:
• Hard as Hell to use
• With extreme trickery will do cross domain,
but only with server cooperation

15. Remote Scripting

16. Remote Scripting
• Pros:
• Super Easy
• Cross Domain!
• Already JavaScript - hey, that's what we're using!
• Cons:
• Only does JavaScript (and JSON)
• An XML OR HTML formatted error is hard to catch
• Only POST and GET
• Need very minor server cooperation