連載
» 2010年06月25日 00時00分 公開

連載:jQuery逆引きリファレンス:第8回 Ajax編(前編) (5/11)

[山田祥寛(http://www.wings.msn.to/),著]



「連載:jQuery逆引きリファレンス」のインデックス

連載目次


 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オブジェクト

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

Copyright© Digital Advantage Corp. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。