Your browser doesn't support the features required by impress.js, so you are presented with a simplified version of this presentation.

For the best experience please use the latest Chrome, Safari or Firefox browser.


AJAX

Prof. Cesare Pautasso
http://www.pautasso.info
[email protected]
@pautasso

Asynchronous JavaScript and XML

Asynchronous JavaScript (and XML)

JSON is the new XML

Web application Architecture

Very Thin Client

Client/Server

Rich Client

General Architecture

The server is a database

The browser is a terminal

Rich vs. Thin Client

Client/Server App Structure

app.js
package.json
models
public/css
public/images
public/js
public/views/*.js
routes
views/*.dust

public contains static assets downloaded and executed by the browser

What about security?

Web servers should not ever run
any code sent by a Web browser

Web browsers use a sandbox (secure virtual machine) to run code downloaded from a Web server

Interconnect

How to connect the client with the server?

How to connect the server with the client?

  • Pull: Fetch and refresh output data
  • Push: Notify client about state changes

Web 1.0 Architecture

Web 1.0 Architecture - Problems

Web 2.0 Architecture

Advantages

Problems

History Navigation

history.pushState(state, "title", URI);
history.replaceState(state, "title", URI);

Write a (new) entry in the browser history
(associate URI with UI state)

window.onpopstate = function(event) {
//history state changed, synchronize the UI:
  document.location;
  document.location.hash; //#URI fragment
  event.state //UI state object
};

React to navigation along the history (back/forward)

history.back(); 
history.forward(); 

Programmatically navigate along the history

AJAX

AJAX combines different technologies:

Synchronous Interaction

The user waits for the server to process each request

Asynchronous Interaction

The UI thread is never blocked since server interactions run in the background

XMLHttpRequest (GET, Synch)

function GET(url) {
  var r = new XMLHttpRequest();
  r.open("GET", url, false);
  r.send(null); 
  //this will continue after the response has arrived
  if (r.status == 200) 
    return r.responseText;
  else
    //handle error
}

false = synchronous

responseText contains the JSON string to be parsed

XMLHttpRequest (GET, Asynch)

function GET(url, callback) {
  var r = new XMLHttpRequest();
  r.open("GET", url, true);
r.onreadystatechange = function() { if (r.readyState == 4) { if (r.status == 200) callback(r.responseText); else //handle error } }
r.send(null); //this will continue immediately }

true = asynchronous

readyState
0uninitialized
1opened
2sent
3receiving
4complete

XMLHttpRequest (POST, Asynch)

function POST(url, params, callback) {
  var r = new XMLHttpRequest();
  r.open("POST", url, true);
  r.onreadystatechange = function() {
    if (r.readyState == 4) {
      if (r.status == 200) 
        callback(r.responseText);
    }
  }
  r.setRequestHeader("Content-Type",
                  "application/x-www-form-urlencoded");
  r.send(params); 
  //this will continue immediately 
}

References

Use a spacebar or arrow keys to navigate