Ajax

Before Ajax, the way that a browser communicated with a server (the "back-end") was typically to submit a form (or get a URL), whereupon the web page was replaced with the response. That replacement can sometimes interrupt a user's experience. Imagine if everytime you clicked "like" on a Facebook page, the entire page was replaced with a new one, even if it looked 99% like the old one.

Ajax is a powerful modern technique whereby a browser page can communicate with a server without having to be replaced by the response. Instead, it's in a kind of "side" conversation going on in parallel (asynchronously) with the browser paying attention to you.

Asynchronous Requests¶

When we invoke a function, we wait around for the response, like this, and then we can use the result as the argument to other functions:

var val = foo(x);
bar(val);
more_work();

That's fine in the context of normal programming, but it doesn't work for lengthy operations. Suppose foo took tens of milliseconds to return. Not only does bar have to wait (it would anyhow), but so does more_work, even if it doesn't depend on foo. More importantly, if the browser has something else to do (such as pay attention to the user), it can't be sitting around waiting for foo to complete.

Instead, we want to use an asynchronous style of programming, where instead of foo returning a value, we pass foo a function that it should invoke on the result. Meanwhile, neither more_work nor the browser will have to wait for foo to complete. Here's the programming style:

foo(x, bar);
more_work();

The more_work function and whatever else the browser is doing can execute immediately. Some tens of milliseconds later, once foo is done, foo will arrange to invoke bar.

That's how Ajax works, because the Ajax call starts a network connection to the server and waits for the response:

$.post('url', data, func);

The first argument is the URL of the server to send the data to. The second argument is the data, usually as a JavaScript object literal. Finally, the last argument is a callback function that will get invoked with the response from the server. Here's a bit more detail:

function gotit (response) {
    console.log('Got '+response);
}

$.post('url', data, gotit);

In the coffeerun app, they send the data to an application they have running on Heroku.

The .get() method works the same way. In fact, both are wrappers for a general .ajax() method that needs to know what HTTP request you want to make:

$.ajax('url', {type: 'get', data: data, success: func});
$.ajax('url', {type: 'post', data: data, success: func});
$.ajax('url', {type: 'delete', data: data, success: func});

LocalStorage¶

Instead of saving things to a remote server, you can save them in the browser, using localStorage. Note that localStorage is persistent, which means that it will last even if you quit the browser and restart it, even days later. That's not the case with regular JavaScript variables, which live just in that one browser tab and will disappear if the browser tab is closed or re-loaded, let alone restarting the browser.

Setting a value

To store something in the local storage of your browser, any of the following will work:

localStorage.fred = 'Fred Weasley';
localStorage['george'] = 'George Weasley';
localStorage.setItem('harry', 'Harry Potter');

To get the values back out, just use the expressions on the left hand side, or the getItem method:

console.log(localStorage.fred);
console.log(localStorage['george']);
console.log(localStorage.getItem('harry'));

There are also methods .removeItem which removes a single key, and clear which removes all keys.