[jQuery]ajaxのcontextキーについて

ajaxメソッドのパラメータにcontextというキーを設定できるのだが、これがまた便利。

具体的に2つのパターンを書いて比較してみる。

<script>
jQuery(function($){
  $('#hoge').on('click',function(e){
    e.preventDefault();
    $.ajax({
      type:'GET',
      url:'test.json',
      success:function(){
        console.log(this)
      }
    });
  });
});
</script>
<input type="button" value="Run" id="hoge">

まずは、contextキーがないパターン。

この場合は、ajaxメソッドの中に設定されているパラメータが返される。

<script>
jQuery(function($){
  $('#hoge').on('click',function(e){
    e.preventDefault();
    $.ajax({
      type:'GET',
      url:'test.json',
      context:this,
      success:function(){
        console.log(this)
      }
    });
  });
});
</script>
<input type="button" value="Run" id="hoge">

次は、contextキーが設定されているパターン。

この場合は、$('#hoge')オブジェクトが返される。

contextがあると何がいいかというと、ajaxの結果をもとに、呼び出し元を使いたい場合などに変数を設定しなくてもアクセスできたりすので便利なんですね。