AJAX Operations Reduced to a Few HTML5 Attributes

AJAX is not the easiest technology to get into, but due to its immense appeal and usefulness, every developer needs to start learning and working with it at one point or another.

Fortunately, working with AJAX requests has been greatly simplified with the launch of intercooler.js, a JavaScript library that uses HTML5 attributes to control how AJAX requests are initiated and handled.

The core attributes

The concept behind this library is very simple & straightforward. Developers load jQuery and intercooler.js on their pages, they write their HTML code, and add one or more custom HTML5 attributes to the places where they want to load and interact with the page's content via AJAX. A sample page structure that utilizes intercooler.js looks like this:

Over 30 HTML5 attributes are available (as with version 0.4.10), but depending on what you want to do and where the retrieved information needs to be displayed, a few of them will enter your daily routine more than others.

The first-level category of attributes is the server request handlers. These are ic-get-from, ic-post-to, ic-put-to, and ic-delete-from, and they can be used to issue an HTTP GET, POST, PUT or DELETE request. Each expects a URL as the attribute's value, the location where the request is issued to and from where the server response will be fetched.

Refining requests

Using solely one of the above attributes typically triggers the AJAX request on the user's click, fetching the server response and replacing the clicked element's content. This is 99% of the time useless because no developer will ever create an application that destroys itself after one click.

To avoid this kind of instances, the intercooler.js team have also made available a series of parameters that allow programmers to control when their AJAX request is issued, and more importantly what to do with the response.

The snippet of code presented below creates an input field, which sends its content to a near-by DIV every time a user enters a new character into it. As you can notice, there are a few different parameters besides the core request controllers, parameters appropriately named, making the entire code's structure easy to read (and most importantly understand) when debugging.

intercooler.js is now showing off

By now you've got the basics of dealing with AJAX. You send requests when and how you want them, receive the server response and place the new content where you need it. In most situations, this will be more than enough. Fortunately for us, intercooler.js packs a bigger punch than we expect.

The library also supports AJAX polling, adding delays to the execution of an AJAX request and showing progress indicators while talking to the server. On top of this, it can also execute callback functions during the process of issuing a request and receiving the server's answer, and remove server answers after a period of time has elapsed.

Just look at the code below. With this snippet, you've just added a spinner that shows up under your button when the user clicks it and gets removed when the server request is retrieved.

There's no reason why intercooler.js should not be adopted by less technical developers and integrated into their daily routine, allowing them to work with AJAX without having to delve into the advanced world of JavaScript before they're ready.