Ajaxのjsonp・callbackの仕組みについて解説します。

ajax

こんにちわ!Ajaxを始めて最初にぶつかる壁は、jsonとjsonpの理解ではないでしょうか?

Ajaxで外部APIを実行したい場合は、とりあえずjsonpを使えば動きます。しかし何故動くのかについては、jsonpのcallbackについて正しい理解が無いと、AjaxとAPIの連携の仕組みまでは分かりません。
今回はjsonpcallbackについて紹介します。

[スポンサーリンク]

このページでは、jsonとjsonpの違いについての説明は割愛します。

callbackってなに?

AjaxでAPIを実行する流れは、だいたいはこんな感じになると思います。
1 : Ajax から 外部APIを実行する。(ajax→API)
2 : 外部APIの戻り値をAjax内で処理して、画面へ表示する。(API→ajax)

APIから戻り値を返した後に、ajax内の関数をコールする。
ここでcallbackが必要になってきます。
イメージとしてはこんな感じの流れです。(下手な絵ですが。。)
jsonp-callback1

リクエストパラメータcallbackの値は、jQueryで自動生成された値が入ってきます。
jQueryで自動生成された値はこんな感じです。jQuery19000728718915007967_1369574811896

リクエストパラメータで、jQuery190...を渡して、
レスポンスパラメータのJSON先頭部分へjQuery190...をつけて返す。という流れになります。

callbackパラメータってどうやってつけるの?

API側がデフォルト値でOKの場合は、開発者が意識する必要はありません。
dataType: 'jsonp'を指定するだけで、デフォルトで、callback=jQuery1900...というパラメータが渡ります。
APIの実行後は、自動的にsuccess、error、に振り分けられて処理を実行します。

    $( function() {
        $( '#ajax-button' ) .click(
        function() {
            $.ajax({
              url: 'http://localhost:8080/app/family?test1=1&test2=1',
              type:'GET',
              dataType: 'jsonp',
              timeout:10000,
              success: function(data) {
                           alert("ok");
                       },
              error: function(data) {
                           alert("ng");
                     },
              complete : function(data) {
                           alert("end");
                     }
            });
        });
    } );

callbackパラメータの名前を変更したい

APIによっては、"callback"以外のパラメータ名で実行する必要のあるAPIもあります。
そんな時は、以下のようにjsonp : "callbackChange",で指定して下さい。
API側が、callbackパラメータを"callbackChange"で取得している場合は、以下のようにしないと動きません。

    $( function() {
        $( '#ajax-button' ) .click(
        function() {
            $.ajax({
              url: 'http://localhost:8080/app/family?test1=1&test2=1',
              type:'GET',
              dataType: 'jsonp',
              jsonp : "callbackChange",
              timeout:10000,
              success: function(data) {
                           alert("ok");
                       },
              error: function(data) {
                           alert("ng");
                     },
              complete : function(data) {
                           alert("end");
                     }
            });
        });
    } );

先ほどの絵であらわすとこんなイメージです。
callbackが、callbackChangeに変わります。
jsonp-callback2

さいごに

jsonpのcallbackについてはいかがだったでしょうか。
callbackの正体は、ajaxとAPIで受け渡しをしているパラメータです。

APIの仕様として、もっとも多いのは、リクエストパラメータにcallbackを指定することが多いように感じます。
この仕様であれば、ajax側の実装者は何もしなくてもOKですね。
ごくまれに、リクエストパラメータにcallback以外を要求することもあるので気をつけましょう!

それでは!