© 2007-2021 Marco Papa & Ellis Horowitz 1
Ajax
Asynchronous JavaScript + XML
Mark Andreessen, Netscape, 1995: “MS Windows will be reduced to
a poorly debugged set of device drivers running under Netscape
Navigator, with desktop-style applications running inside the browser”.
This did not happen until 10 years later (true/false?)
© 2007-2021 Marco Papa & Ellis Horowitz 2
Asynchronous JavaScript + XML
• Ajax isn’t a technology.
• It’s really several technologies. Ajax incorporates:
– standards-based presentation using XHTML;
– CSS, dynamically manipulated using JavaScript;
– dynamic display and interaction using the Document
Object Model (DOM). Web page exposed as DOM object;
– data interchange using XML (nowadays JSON);
– asynchronous data retrieval using XMLHttpRequest, a
JavaScript object, a.k.a “Web remoting”;
– JavaScript binding everything together;
– Server no longer performs display logic, only
business logic.
• Acronym originated by Jesse James Garrett in 2005:
https://immagic.com/eLibrary/ARCHIVES/GENERAL/ADTVPATH
/A050218G.pdf
© 2007-2021 Marco Papa & Ellis Horowitz 3
Some History and Browsers Supporting Ajax
• The XMLHttpRequest object (XHR) is the main element of Ajax
programming.
• Microsoft first implemented the XMLHttpRequest object in
Internet Explorer 5 (IE5) for Windows as an ActiveX object
in March 1999, making it the first Ajax-enabled browser.
• Similar functionality is covered in a recommended W3C
standard, Document Object Model (DOM) Level 3 Load and Save
Specification (April 2004):
http://www.w3.org/TR/DOM-Level-3-LS
• Engineers on the Mozilla project implemented a compatible
native version for Mozilla 1.0 (included in Netscape 7,
Firefox 1.0 and later releases). Apple has done the same
starting with Safari 1.2.
• Other browsers supporting XMLHttpRequest include:
– Opera 7.6+, Apple Safari 1.2+, all mobile browsers
• XMLHttpRequest moved to W3C in 2006 and back to WHATWG in
2012 as XMLHttpRequest Living Standard:
– https://xhr.spec.whatwg.org/
An Example Using Ajax – Google Maps
© 2007-2021 Marco Papa & Ellis Horowitz 4
Initial screen zoom 3 times drag map and zoom
See: https://maps.google.com
Notice that the page is never explicitly refreshed. View source and search
for XMLHttpRequest; you will find multiple occurrences. (found 2 times on
maps.google.com)
© 2007-2021 Marco Papa & Ellis Horowitz 5
Mashup Example –
www.zillow.com
A combination of satellite
photos with records of home
sale prices placed on top of
the appropriate houses
Found 4+ references of
XMLHttpRequest
A “mash-up” is a web application that consumes (“remixes”)
content from different sources and aggregates them to create a new application
A Mash-Up Combines Multiple Sources of Data
© 2007-2021 Marco Papa & Ellis Horowitz 6
Characteristics of Ajax Applications
• They are applications (or Apps), not just web
sites
• They allow for smooth, continuous interaction
• “Live” content
• Visual Effects
• Animations, dynamic icons
• Single keystrokes can lead to server calls
• New Widgets (selectors, buttons, tabs, lists)
• New Styles of Interaction (drag-and-drop,
keyboard shortcuts, double-click)
© 2007-2021 Marco Papa & Ellis Horowitz 7
Comparing Traditional vs. AJAX Websites
Traditional
• Interface construction is
mainly the responsibility
of the server
• User interaction is via
form submissions
• An entire page is required
for each interaction
(bandwidth)
• Application is unavailable
while an interaction is
processing (application
speed)
Ajax
• Interface is manipulated
by client-side JavaScript
manipulations of the
Document Object Model
(DOM)
• User interaction via HTTP
requests occur ‘behind the
scenes’
• Communication can be
restricted to data only
• Application is always
responsive
© 2007-2021 Marco Papa & Ellis Horowitz 8
How to Recognize an Ajax Application
Internally
“View Source” in the browser and search for:
• Javascript code that invokes:
– XMLHttpRequest or
• JavaScript that “loads” other JavaScript code
(files with .js extension)
• XML code passed as text strings to a server,
such as ‘
• Javascript
Request an XML file