AJAX / Single-page web apps

This is a thing by Kyle Hill
He is a software engineer at JIBE

A really pedantic overview of
Client-Server Architecture


  • Client (e.g. web browser) makes request from server
  • Server returns something to client
  • Client does something with that data


(Sorry if you knew that already)

A brief history of web development

Walled Garden Networks

World Wide Web

Client-side page code

Client-side executable code

AJAX (or, the holy grail)


  • Asynchronous
  • Javascript
  • And
  • XML

XMLHttpRequest - NATIVE AJAX


// Creates a new instance of the JS-native XMLHttpRequest class
var request = new XMLHttpRequest();

// Creates a listener for the "load" event
// Executes this function when data loads
request.onload = function() {
  console.log(this.responseText);
};

/* Prepares to send a request:
 * First parameter: the HTTP verb used with the server
 * Second parameter: the relative path to where we're getting data
 * Third parameter: Should we do this asychronously? (Yes.) 
 */
request.open("get", "/api/cats", true);

// Fire zee missles
request.send();
					

... except

  • XHR is idiosyncratic in many browsers (goddamnit, IE)
  • Java-style method parameterization
  • So much boilerplate code, so many exceptions
  • Sucks to read. I mean, seriously, look at it again

XMLHttpRequest - NATIVE AJAX


// Creates a new instance of the JS-native XMLHttpRequest class
var request = new XMLHttpRequest();

// Creates a listener for the "load" event
// Executes this function when data loads
request.onload = function() {
  console.log(this.responseText);
};

/* Prepares to send a request:
 * First parameter: the HTTP verb used with the server
 * Second parameter: the relative path to where we're getting data
 * Third parameter: Should we do this asychronously? (Yes.) 
 */
request.open("get", "/api/cats", true);

// Fire zee missles
request.send();
					

The solution to these problems, which is remarkably similar to the solution for almost every other problem in Javascript


Fuck it, just use jQuery.

jQuery

  • Created by John Resig in 2006
  • JS library for interacting with contents of a web page
  • Whole bunch of convenience methods
  • Used by basically every web page/app in the world
  • $ as a convenience variable

jQuery.ajax


$.ajax({
  // Relative path to where we're getting data
  url: "/api/cats",
  
  // Executes this function when data loads
  success: function(data) {
    console.log(data);
  }
});
            

Now with robustness


$.ajax({
  // Relative path to where we're getting data
  url: "/api/cats",
  
  // JS object, contents passed to the server with the request
  data: { color: "brown" },

  method: "GET",

  success: function(data) {
    console.log(data);
  },
  
  // Executes this function when something breaks
  error: function() {
    doSomethingElseInstead();
  },
  
  // Executes this function after success or failure
  complete: function() {
    ayoImDoneWithMyTransaction();
  }
});
            

Code time!

With great power comes

Limitations

No cross-domain AJAX requests

Be careful with your code

Asynchronous code is "fun"

Client-server model

Thanks!

@kylehill