第8回 Ajax編（前編）：連載：jQuery逆引きリファレンス（5/11 ページ）

ｊQueryを使えばAjax技術による非同期処理も簡潔に記述できる。Ajax関連の基本メソッドをまとめた、すぐに役立つ10本を一挙公開。

[山田祥寛（http://www.wings.msn.to/），著]

連載目次

　loadメソッドの引数fncを指定することで、非同期通信が成功したタイミングで任意の処理を実行できます。

　例えば以下は、非同期にコンテンツを更新したタイミングでフェードアウト→フェードインを行う例です。このようなアニメーション効果をコンテンツに適用することで、ページの一部が更新された場合にも、エンドユーザーが「どの部分が更新されたのか」を把握しやすくなります。

<script type="text/javascript">

$(function() {
  $('#btn').click(function() {

    // CurrentFormat.aspxの結果を非同期に取得*
     $('#result').load('./CurrentFormat.aspx',
        { format: 'yyyy年MM月dd日 HH時mm分ss秒' },
        function() {
          $(this).fadeOut().fadeIn();
       }); // 通信後にアニメーションを実行
  });
});
</script>

  ……中略……

<form>
  <input type="button" id="btn" value="現在時刻" />
  <div id="result"></div>
</form>

リスト111 通信後にアニメーション効果を適用（LoadCallback.html）
* CurrentFormat.aspxおよび、サーバサイド・スクリプトに対してポスト・データを送信する方法については、「サーバサイド・スクリプトにデータを送信するには？」を参照してください。このHTMLを実際にブラウザで開く

ブラウザで開く

リスト111の実行結果

　リスト111の例では利用していませんが、コールバック関数（引数fnc）では引数として以下の情報を受け取ります。

• レスポンス本体（テキスト）
• 通信結果ステータスを表すテキスト（success、notmodifiedなど）
• XMLHttpRequestオブジェクト

　必要に応じて、これらの情報も利用するとよいでしょう。