jQuery逆引きリファレンス
特定のAjax通信でのみグローバルイベントを無効化するには？（$.ajax［global］）
Ajax通信の開始／終了／成功／失敗のタイミングで任意の処理を差し挟む際に利用するグローバルイベントを、現在の通信だけ対象外にする方法を説明する。
jQueryでは、グローバルイベントと呼ばれる仕組みを利用することで、Ajax通信の開始／終了／成功／失敗のタイミングで、任意の処理を差し挟むことが可能になります。具体的な実装については、別稿「TIPS：非同期通信の開始／終了／成功／失敗のタイミングで処理を実行するには？」で解説しているので、併せて参照してください。
もっとも、グローバルイベントが一様に全てのAjax通信に適用されてしまうのが望ましくない場合もあります。そのような状況では、$.ajaxメソッドのglobalパラメーターをfalseとすることで、現在の通信だけをグローバルイベントの対象外にできます。
以下は、先述の別稿で作成したget.htmlファイルを、$.ajaxメソッド（globalパラメーター）で書き換えて、グローバルイベントを適用されないようにしたものです。本稿では、別稿からの差分を示しますので、完全なコードは、ダウンロードサンプルから確認してください。
|
$(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('正しい結果を得られませんでした。');
});
});
});
|
実行してみると、グローバルイベントで指定された待ちアイコンの表示や、結果のハイライト表示が無効になっていることが確認できます。
globalパラメーターのデフォルト値はtrueなので、グローバルイベントを有効にする場合は、特に意識する必要はありません（＝太字部分を削除するだけで構いません）。
API：jQuery.ajax() カテゴリ：Ajax > Low-Level Interface（低レベルインターフェース）
※以下では、本稿の前後を合わせて5回分（第64回～第68回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
65. イベントリスナーをそのままに、要素を削除するには？（detach）
イベントリスナーを破棄せず維持した状態で要素を削除し、再生成時に元通りにする方法を説明。削除／再生成ではなく、非表示／表示の利用推奨についても言及する。
66. 【現在、表示中】≫ 特定のAjax通信でのみグローバルイベントを無効化するには？（$.ajax［global］）
Ajax通信の開始／終了／成功／失敗のタイミングで任意の処理を差し挟む際に利用するグローバルイベントを、現在の通信だけ対象外にする方法を説明する。
67. jQueryを他のライブラリと共存させるには？（jQuery.noConflict）
他のライブラリ導入により「$」や「jQuery」というオブジェクト名が衝突する問題を回避する方法を紹介。別名を定義する方法を2パターン、紹介する。
68. 異なるバージョンのjQueryを共存させるには？（jQuery.noConflict）
jQueryが持つオブジェクト名との衝突を回避するためのjQuery.noConflictメソッドを応用して、jQueryで複数のバージョンをロードする方法を説明する。
