Asynchronous JavaScript and XML (AJAX)

Web-Based Publishing (INFO 290-19)

Erik Wilde, UC Berkeley School of Information
2007-03-13
Creative Commons License

This work is licensed under a Creative Commons
Attribution-NonCommercial-ShareAlike 2.5 License.

Abstract

Asynchronous JavaScript and XML (AJAX) is a technology which allows client-side JavaScript to make requests to a server without causing a reload of the current page in the browser. Using AJAX and standard DOM methods, client-side JavaScript can request, receive, and visualize information in the context of a single Web page. The advantage of AJAX over more traditional Web pages is that they better resemble the behavior of desktop applications, providing enhanced features and usability for the user.

Web Applications

Rich Internet Applications (RIA)

Outline (AJAX Basics)

  1. AJAX Basics [5]
  2. AJAX and REST [7]
  3. XMLHttpRequest [2]
  4. JavaScript Object Notation (JSON) [3]
  5. Conclusions [1]

AJAX = DHTML + HTTP

AJAX Clock

function createRequestObject() {
 var ro;
 var browser = navigator.appName;
 if (browser == "Microsoft Internet Explorer") {
  ro = new ActiveXObject("Microsoft.XMLHTTP"); }
 else {
  ro = new XMLHttpRequest(); }
 return ro; }

var http = createRequestObject();

function sndReq() {
 http.open('get', 'clock.php');
 http.onreadystatechange = handleResponse;
 http.send(null);
 setTimeout("sndReq()", 1000); }

function handleResponse() {
 if (http.readyState == 4){
  var response = http.responseText;
  var update = new Array();
  if (response.indexOf('|' != -1)) {
   update = response.split('|');
   document.getElementById("dtime").innerHTML = "Server's Time: " + update[1]; } } }

AJAX with JavaScript

Google Maps with JavaScript

AJAX without JavaScript

Google Maps without JavaScript

AJAX and DHTML

Comparison of AJAX and DHTML

Outline (AJAX and REST)

  1. AJAX Basics [5]
  2. AJAX and REST [7]
  3. XMLHttpRequest [2]
  4. JavaScript Object Notation (JSON) [3]
  5. Conclusions [1]

AJAX and Web Architecture

Web Application Architecture

Web Application Architecture

Static Documents

Static Documents

Dynamic Documents

Dynamic Documents

State on the Stateless Web

Server Side State (Cookies)

Server Side State (Cookies)

Client Side State (AJAX)

Client Side State (AJAX)

Outline (XMLHttpRequest)

  1. AJAX Basics [5]
  2. AJAX and REST [7]
  3. XMLHttpRequest [2]
  4. JavaScript Object Notation (JSON) [3]
  5. Conclusions [1]

Interface

Method Description
abort() Cancels the current request.
getAllResponseHeaders() Returns the complete set of HTTP headers as a string.
getResponseHeader(headerName) Returns the value of the specified HTTP header.
open(method, URL)
open(method, URL, async)
open(method, URL, async, userName)
open(method, URL, async, userName, password) 		Specifies the method, URL, and other optional attributes of a request. The URL parameter may be either a relative or complete URL. The async parameter specifies whether the request should be handled asynchronously or not – true means that script processing carries on after the send() method, without waiting for a response, and false means that the script waits for a response before continuing script processing.
send(content) Sends the request.
setRequestHeader(label, value) Adds a label/value pair to the HTTP header to be sent.

Object Features

Outline (JavaScript Object Notation (JSON))

  1. AJAX Basics [5]
  2. AJAX and REST [7]
  3. XMLHttpRequest [2]
  4. JavaScript Object Notation (JSON) [3]
  5. Conclusions [1]

JavaScript and XML

JSON Example

<?xml version="1.0"?>
<menu id="file" value="File">
 <popup>
  <menuitem value="New" onclick="CreateNewDoc()"/>
  <menuitem value="Open" onclick="OpenDoc()"/>
  <menuitem value="Close" onclick="CloseDoc()"/>
 </popup>
</menu>
 
{ "menu" : {
 "id" : "file",
 "value" : "File",
 "popup" : {
  "menuitem" : [
   { "value" : "New", "onclick" : "CreateNewDoc()" },
   { "value" : "Open", "onclick" : "OpenDoc()" },
   { "value" : "Close", "onclick" : "CloseDoc()" }
  ]
 }
}}

JSON via Content Negotiation

Outline (Conclusions)

  1. AJAX Basics [5]
  2. AJAX and REST [7]
  3. XMLHttpRequest [2]
  4. JavaScript Object Notation (JSON) [3]
  5. Conclusions [1]

Handle with Care