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

ｊQueryにおいて、Ajax関連操作のコアである「$.ajaxメソッド」についてまとめた、すぐに役立つ9本を一挙公開。

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

連載目次

　グローバル・イベントとは、要素セットの単位に関連付けられるイベントのことをいいます。グローバル・イベントの設定方法については、「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（無効）にした場合はどうでしょう。今度は［通信開始］ボタンをクリックしても進ちょくアイコンが表示「されず」、グローバル・イベントが無効化されていることを確認できます。