AJAX

• Ajax: A New Approach to Web Applications by Jesse James Garrett
• This is the paper that coined the term AJAX
• Garrett's Characterization of AJAX
  1. Standards-based presentation using XHTML and CSS;
  2. Dynamic display and interaction using the Document Object Model;
  3. Data interchange and manipulation using XML and XSLT;
  4. Asynchronous data retrieval using XMLHttpRequest;
  5. JavaScript binding everything together.

Pre-AJAX Approach

1. User clicks link/form
2. Server gets form and computes a new page to show
3. Browser displays whole new page

• This is the model used by Java Server Pages (JSP) and Java Server Faces (JSF)
• Slow and irritating

AJAX Goal

• Allow client side browser-based applications to provide a rich and responsive interface
• Richness stems from having many kinds of widgets
• Responsiveness requires two things

1. Ability to modify the current page and have changes show immediately
2. Ability to send and receive requests without blocking

• #1 comes by using DOM tree modification
• #2 comes from the non-blocking XMLHttpRequest operation

Background: Javascript

• Javascript (aka ECMAscript) is a scripting language that is supported by essentially all web browers
• It is the current lingua franca of the web
• Has superficial relationship to Java
• Javascript has untyped variables
• Javascript is a "prototype"–based language
  • Style originated with the Self language
• When an object is created, it is created as a clone of some other object—the prototype.
• There is no notion of Class, or perhaps every object can be a class.
• Naming is difficult
  • There is no Class to define the interface
  • The set of methods can be changed dynamically for any object

Javascript and Events

• Javascript is a sequential language: it does not support threading
• Instead, it supports an event model
• Event handlers are associated with kinds of events and are invoked when that event occurs.
• Example events: button push, text typing...
• and most importantly: response to an HTTP request
  • This is the key to AJAX
• But like threads, events suffer from the problems of access to shared resources

XMLHttpRequest

• Microsoft added this operation to Javascript; Google made popular with its GMail interface
• Since picked up by all other Javascript implementations, but in variant forms
• XMLHttpRequest (XHR for short) is an object that encapsulates an HTTP request
• The XHR supports asynchronous invocation of the request
• Since the main thread is not blocked by the call, it is capable of continuing to respond to other events (typically UI events)

XMLHTTPRequest Operation

1. Create XMLHttpRequest object
2. "open()" to establish the protocol
3. Set a "callback" procedure (inversion of control)
4. "send()" to initiate the call to the server
5. Control immediately returns to the caller of send()
6. Eventually, server starts to respond
7. Response is complete
8. Callback is notified

Example Code

• The examples are taken from the book Head Rush Ajax
• They even support a server for testing your code
  Break Neck Pizza Example from Chapter 5
• Code for Two Examples:
  1. Boards-R-US
  2. Breakneck Pizza

Data Transmission

• The choice of format for data sent back and forth between client and server is arbitrary, as long as they agree
• Plain text (as in the examples)
• XML (the obvious choice )
• SOAP
• A fragment of code (JSON)

Asynchronous Server to Client Callbacks

• XMLHttpRequest can be (mis-)used to allow a server to send messages asynronously to the client.
• This is useful when the server's database can be updated by some other agency (e.g. a new wire or RSS feed) and the client needs to be notified

JSON

• JSON is a format for passing data that takes the form of a set of (key,value) pairs.

  {"totals": [{
      "boardsSold": 1710,
      "bootsSold": 315,
      "bindingsSold": 85
  ]};
  

• This set is actually a piece of Javascript code that can be executed (with eval()) on the client to create/initialize a "totals" object with three fields.
• Can be abused by a malicious server to execute arbitrary Javascript
• Requires parsing by languages other than Javascript

Summary

• Ajax provides a better client side interface
• DOM tree manipulation provides in-place partial screen update
• This places the UI on the client
• XMLHttpRequest supports communication with the server
• Because it is non-blocking, it does not slow down the UI
• Server is for data and computation
• A variety of data formats can be used to communicate information: the data need not be user-friendly

AJAX Toolkits

• Keith provided a pointer to a popularity survey of AJAX toolkits (as of September 23, 2006)

Toolkits (cont.)

• The complete list indicates some 160 tookits exist
• 25% work with XMLHttpRequest directly
• 11% are using JSON to transfer data
• See also Round-up of 50 AJAX Toolkits and Frameworks

List of AJAX and Related Toolkits