jQuery逆引きリファレンス

jQuery逆引きリファレンス

特定のAjax通信でのみグローバルイベントを無効化するには?($.ajax[global])

2017年3月9日

Ajax通信の開始/終了/成功/失敗のタイミングで任意の処理を差し挟む際に利用するグローバルイベントを、現在の通信だけ対象外にする方法を説明する。

  • このエントリーをはてなブックマークに追加

 jQueryでは、グローバルイベントと呼ばれる仕組みを利用することで、Ajax通信の開始/終了/成功/失敗のタイミングで、任意の処理を差し挟むことが可能になります。具体的な実装については、別稿「TIPS:非同期通信の開始/終了/成功/失敗のタイミングで処理を実行するには?」で解説しているので、併せて参照してください。

 もっとも、グローバルイベントが一様に全てのAjax通信に適用されてしまうのが望ましくない場合もあります。そのような状況では、$.ajaxメソッドのglobalパラメーターをfalseとすることで、現在の通信だけをグローバルイベントの対象外にできます。

 以下は、先述の別稿で作成したget.htmlファイルを、$.ajaxメソッド(globalパラメーター)で書き換えて、グローバルイベントを適用されないようにしたものです。本稿では、別稿からの差分を示しますので、完全なコードは、ダウンロードサンプルから確認してください。

JavaScript
$(function() {
  // グローバルイベントを準備
  $(document)
    // 通信の開始終了時に待ちアイコンを表示
    .ajaxStart(function() {
      $('#spinner').show();
    })
    .ajaxStop(function() {
      $('#spinner').hide();
    })
    // 通信成功時に結果をハイライト
    .ajaxSuccess(function() {
      $('#result').css('background-color', '#ffc');
      setTimeout(function() {
        $('#result').css('background-color', '');
      }, 300);
    })
    // 通信失敗時にログを出力
    .ajaxError(function(e, xhr, opts, error) {
      console.log('AjaxError:' + error);
    });

  // [検索]ボタンクリックで、通信を開始
  $('#search').click(function() {
    // グローバルイベントを無効化($.get()ではなく$.ajax()を使用すること)
    $.ajax('get.php',
      {
        type: 'get',
        data: { query: $('#keyword').val() },
        global: false
      }
    )
    .done(function(data) {
      // ……中略(通信成功時の処理)……
    })
    .fail(function() {
      window.alert('正しい結果を得られませんでした。');
    });
  });
});
グローバルイベントを無効化するためのコード(get.html)

 実行してみると、グローバルイベントで指定された待ちアイコンの表示や、結果のハイライト表示が無効になっていることが確認できます。

 globalパラメーターのデフォルト値はtrueなので、グローバルイベントを有効にする場合は、特に意識する必要はありません(=太字部分を削除するだけで構いません)。

処理対象:基本 カテゴリ:Ajax
API:jQuery.ajax() カテゴリ:Ajax > Low-Level Interface(低レベルインターフェース)

※以下では、本稿の前後を合わせて5回分(第64回~第68回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

64. アニメーションを一時停止するには?(delay)

実行中のアニメーションを途中で一時停止するdelayメソッドの基本的な使い方を説明。delayメソッド特有の問題点も取り上げる。

65. イベントリスナーをそのままに、要素を削除するには?(detach)

イベントリスナーを破棄せず維持した状態で要素を削除し、再生成時に元通りにする方法を説明。削除/再生成ではなく、非表示/表示の利用推奨についても言及する。

66. 【現在、表示中】≫ 特定のAjax通信でのみグローバルイベントを無効化するには?($.ajax[global])

Ajax通信の開始/終了/成功/失敗のタイミングで任意の処理を差し挟む際に利用するグローバルイベントを、現在の通信だけ対象外にする方法を説明する。

67. jQueryを他のライブラリと共存させるには?(jQuery.noConflict)

他のライブラリ導入により「$」や「jQuery」というオブジェクト名が衝突する問題を回避する方法を紹介。別名を定義する方法を2パターン、紹介する。

68. 異なるバージョンのjQueryを共存させるには?(jQuery.noConflict)

jQueryが持つオブジェクト名との衝突を回避するためのjQuery.noConflictメソッドを応用して、jQueryで複数のバージョンをロードする方法を説明する。

イベント情報(メディアスポンサーです)

サイトからのお知らせ

Twitterでつぶやこう!