intercooler.js - Ajaxの実装をHTMLだけで簡単に

Webアプリケーション開発時において、切っても切り離せないのがAjaxです。サーバからのコンテンツを取得したり、逆に登録したりして画面を書き換えると言ったことが良く行われています。

実装が面倒なAjaxをHTMLだけで実現してくれるのがintercooler.jsです。

intercooler.jsの使い方

HTMLの例です。

<a ic-post-to="/click">
   Click Me!
 </a>

クリックで表示が変わります。

例えばクリックでインライン編集モードになって、その結果を指定したURLに送ると言った仕組みも作れます。

<div id="contact-div">
  <div><strong>First Name</strong>: Joe</div>
  <div><strong>Last Name</strong>: Smith</div>
  <div><strong>Email</strong>: joesmith@example.com</div>
  <button ic-target="#contact-div" ic-get-from="/contact/1/edit" class="btn btn-default">
    Click To Edit
  </button>
</div>

ちょっとしたアクションであればintercooler.jsを使うことでコーディングレスで実装できるでしょう。それこそプログラマーに頼らずに実現できるかも知れません。デザイナーの方はintercooler.jsを使ってみると色々捗りそうです。

intercooler.jsはJavaScript製のオープンソース・ソフトウェア（MIT License）です。

intercooler.js - Simple AJAX using HTML attributes

LeadDyno/intercooler-js: Making AJAX as easy as anchor tags