jQuery逆引きリファレンス
Ajax通信で成功／失敗コールバックに任意の値を渡すには？（$.ajax［context］）
主にコールバック関数に任意の値を引き渡す目的で使える「$.ajaxメソッドのcontextパラメーター」の基本的な使い方を説明する。
別稿「TIPS：一般的なAjax通信を実装するには？」では、$.ajaxメソッドを利用したAjax通信の基本について解説しました。本稿では、引き続き、その動作パラメーターの一つであるcontextについて解説します。contextパラメーターで指定されたオブジェクトには、各コールバック関数の配下でthisとしてアクセスできるようになります。これを利用することで、コールバック関数に任意の値を引き渡すことが可能になります。
例えば以下は、contextパラメーター経由で背景色（backgroundプロパティ）を渡す例です。指定された値は、サーバーサイドから取得したコンテンツをページに反映する際に利用します。
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
</head>
<body>
<form>
<input type="button" id="btn" value="コードの表示" />
<pre id="result"></pre>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(function() {
// ボタンクリック時に指定されたファイルを読み込み、その内容を表示
$('#btn').click(function() {
$.ajax('ajax.html',
{
type: 'get',
dataType: 'html',
// 1コンテキストとして引き渡すオブジェクト
context: {
backcolor: '#F99'
}
}
)
// 2指定されたカラーで背景色を設定
.done(function(data) {
$('#result').css('background-color', this.backcolor)
.text(data);
});
});
});
</script>
</body>
</html>
|
contextパラメーターには、任意のオブジェクトを引き渡すことが可能です（1）。ここでは、backgroundプロパティ（文字列型）を1つだけ持った匿名オブジェクトを指定していますが、もちろん、必要に応じて複数のプロパティ、任意の型の値を指定することも可能です*1。
contextパラメーターで与えられたオブジェクトは、そのままコールバック関数内のthisとしてアクセスできるようになります。
- *1 そもそ単純な値を渡すだけであれば、
contextパラメーターに文字列や数値をそのまま渡しても構いません。しかし、コードの分かりやすさ、後々にパラメーターを増やしたいという場合に備えて、普通はオブジェクトとして受け渡すのが吉です。
API：jQuery.ajax() カテゴリ：Ajax > Low-Level Interface（低レベルインターフェース）
※以下では、本稿の前後を合わせて5回分（第61回～第65回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
61. Ajax通信の前に処理を実行するには？（$.ajax［beforeSend］）
Ajax通信を送信する前に任意の処理を実行できるようになる「$.ajaxメソッドのbeforeSendパラメーター」の基本的な使い方を説明する。
62. Ajax通信で得られたコンテンツを加工するには？（$.ajax［dataFilter］）
$.ajaxメソッドにより得たコンテンツをdoneメソッドで処理する前に加工／編集できる「$.ajaxメソッドのdataFilterパラメーター」の基本的な使い方を説明する。
63. 【現在、表示中】≫ Ajax通信で成功／失敗コールバックに任意の値を渡すには？（$.ajax［context］）
主にコールバック関数に任意の値を引き渡す目的で使える「$.ajaxメソッドのcontextパラメーター」の基本的な使い方を説明する。
65. イベントリスナーをそのままに、要素を削除するには？（detach）
イベントリスナーを破棄せず維持した状態で要素を削除し、再生成時に元通りにする方法を説明。削除／再生成ではなく、非表示／表示の利用推奨についても言及する。
