AJAX allows asynchronous communication between the client and server without refreshing the page. It uses techniques like XMLHttpRequest, iFrames, and remote scripting to update parts of the DOM without reloading the entire page. The same origin policy prevents scripts from one origin accessing properties from another for security. Popular browsers that support AJAX include Internet Explorer, Firefox, and WebKit which powers Safari and Chrome.

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