Nullyのぶろぐ

仙台で働くエンジニアの日記

Ajax専用JSライブラリ SACK

Ajaxを行うためだけにjQueryやMootools、PorotypeJSなどのようなごついライブラリを使うのもなんだか機が引けちゃう...。

という場合はAjax専用のJSライブラリSACK(Simple Ajax Code Kit)を利用すると良いかもしれません。

SACKとは

SACK(サック)はTwilight Universeさんが開発されているシンプルで軽量なAjax専用のライブラリです。

名前の由来もSimple Ajax Code Kitのそれぞれの頭文字をとって命名されています。

使い方

まずは、SACKを利用するページに読み込みます。

<script type="text/javascript" src="js_tw-sack.js"></script>

次にSACKを利用するために、インスタンスを生成します。

var ajax = new sack();

そんでもって、いろいろコールバックを定義します。

function whenLoading() {

alert("Nully");

}

function whenLoaded() {

alert("は");

}

function whenInteractive() {

alert("ゆきりんが");

}

function whenCompleted() {

alert("大好き!");

}

そして最後に実行する内容を書いていきます。

// フォームタグを取得する

var form = document.getElementById('form');

// 送信内容をセットする

ajax.setVar("myTextBox", form.mytext.value);

// リクエスト先のファイル(URL)を指定します

ajax.requestFile = "sackdemo.php";

// 送信メソッドを指定します

ajax.method = form.method.value;

// レスポンステキストをいれこむ要素ID

ajax.element = 'replaceme';

// 読み込み中のコールバック関数

ajax.onLoading = whenLoading;

// データ送信中のコールバック関数

ajax.onLoaded = whenLoaded;

// データ取得中のコールバック関数

ajax.onInteractive = whenInteractive;

// 通信終了後のコールバック関数

ajax.onCompletion = whenCompleted;

// AJAXを開始

ajax.runAJAX();

jQueryやMootoolsなどよりコード量が若干多くなりますが、ここまでシンプルにかけるので、かなり使いやすいのではないかと想います。

余談ですが

このSACKは実はWordPressのAjax機構にも利用されています。

終わりに

Ajaxは今では必須となりつつある技術ではありますが、勉強のためにざっと使ってみると良いかもです。

詳しいドキュメントはダウンロードしたファイルに同梱されているdocs.htmlを御覧ください。