連載
» 2010年07月30日 00時00分 公開

連載:jQuery逆引きリファレンス:第9回 Ajax編(後編) (5/10)

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



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

連載目次


 グローバル・イベントとは、要素セットの単位に関連付けられるイベントのことをいいます。グローバル・イベントの設定方法については、「Ajax通信にかかわるイベント・リスナを登録するには?」でも解説していますので、併せて参照してください。

 グローバル・イベントは、基本的にすべてのAjax通信に対して発生しますが、特定の通信ではイベントを発生させたくないというケースもあるでしょう。そのような場合には、$.ajaxメソッドのglobalパラメータをfalse(無効)に設定します。

 具体的な例も見てみましょう。以下は、グローバル・イベントを利用して、Ajax通信中に進ちょくアイコン(ajax-loader.gif)を表示する例です。ajaxStart/ajaxEndイベントを利用して、通信中アイコンの表示/非表示を切り替えます。

<script type="text/javascript">

$(function() {

  $('#prog')
    .ajaxStart(function() {
      $(this).show();
    })
    .ajaxStop(function() {
      $(this).hide();
    });

  $('#btn').click(function() {
    $.ajax({
      url: './Progress.aspx',
      global: true,
      success: function(data) {
        $('#result').html(data);
      }
    });
  });
});

</script>

  ……中略……

<form>
  <input type="button" id="btn" value="通信開始" />

  <div id="result"></div>

  <img id="prog" src="ajax-loader.gif"
       alt="" style="display:none;" />
</form>

リスト123 通信中に進ちょくアイコンを表示する(AjaxGlobal.html)
このHTMLを実際にブラウザで開く


ブラウザで開く

リスト123の実行結果

 リスト123のように、globalパラメータがtrueである場合にはグローバル・イベント(ajaxStart/ajaxStop)が有効ですので、上図のように進ちょくアイコンが表示されるのを確認できます。

 しかし、globalパラメータをfalse(無効)にした場合はどうでしょう。今度は[通信開始]ボタンをクリックしても進ちょくアイコンが表示「されず」、グローバル・イベントが無効化されていることを確認できます。

Copyright© Digital Advantage Corp. All Rights Reserved.

RSSについて

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

メールマガジン登録

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