none
jsonp で web api を呼ぶ方法 RRS feed

  • 質問

  • Visual Studio Express 2013 for Web を使用して Web API を開発しています。

    クロスサイトドメイン通信を行うためクライアント側から JSONP を使用して API を呼び出したいと考えています。

    準備として Global.asax に JsonMediaTypeFormatter を登録し、Product クラスを作成しました。

    ブラウザに API の URL を直接入力して JSON 形式で通信できるのは確認しましたが、JavaScript からの通信が動作しません。

    <script type="text/javascript">
    function search() {
      $.ajax({
        type: 'GET',
        url: 'http://localhost:ポート番号//api/values',
        dataType: 'jsonp',
        crossDomain: true,
        jsonpCallback: 'jCallback'
      })
      .done(function (product) {
        alert(product.Name);
      })
      .fail(function (jqXHR, textStatus, error) {
        alert('エラー:' + error);
      })
      .always(function (jqXHR, textStatus, error) {
        alert('always');
      });
    }
    function jCallback(result) { alert('jCallback' + result) }
    </script>

    ブラウザのボタンをクリックして JavaScript を実行するようにしています。

    ボタンをクリックすると jCallback was not called になりコールバック関数が呼ばれないエラーが発生します。

    私としてはコールバック関数は必要ありません。呼び出しに成功したら done 関数が呼ばれて、Product の値を html に表示できればそれでいいです。

    jQuery の ajax 関数の使い方が間違っているのか Web API 側で何かすればいいのか、何か情報をお持ちでしたら教えていただけると助かります。

    よろしくお願いします。


    ダッチ http://youryella.wankuma.com/

    2014年7月8日 6:12

回答

  • nugetでWebApiContrib.Formatting.Jsonpをインストールした後に、Global.asaxやWebApi.ConfigクラスあたりでFormatterを登録したらうまく行ったりしません?

    https://github.com/WebApiContrib/WebApiContrib.Formatting.Jsonp/blob/master/samples/WebApiContrib.Formatting.Jsonp.SampleWebHost/Global.asax.cs


    • 編集済み かるあ 2014年7月8日 9:59
    • 回答としてマーク ダッチ 2014年7月9日 2:01
    2014年7月8日 9:58
  • ASP.NET というよりjQueryのajax関数の話になりますが、カスタムのcallbackが必要ないなら指定しなければよいです。

    指定しない場合jQuey側で適当なcallbackを指定してJSONPの返却値を処理しますが、返却値はthen()やdone()のresponseから取り出せるはずです。

    • 回答としてマーク ダッチ 2014年7月9日 2:01
    2014年7月9日 1:37

すべての返信

  • nugetでWebApiContrib.Formatting.Jsonpをインストールした後に、Global.asaxやWebApi.ConfigクラスあたりでFormatterを登録したらうまく行ったりしません?

    https://github.com/WebApiContrib/WebApiContrib.Formatting.Jsonp/blob/master/samples/WebApiContrib.Formatting.Jsonp.SampleWebHost/Global.asax.cs


    • 編集済み かるあ 2014年7月8日 9:59
    • 回答としてマーク ダッチ 2014年7月9日 2:01
    2014年7月8日 9:58
  • かるあさん、回答ありがとうございます。

    JsonMediaTypeFormatter のことを JsonpMediaTypeFormatter だと勘違いしていました。

    教えていただいた JsonpMediaTypeFormatter を使用したら、コールバック関数が呼ばれるようになりました。ありがとうございます。

    ちなみにコールバック関数は応答が正常なときのみ呼ばれるようですが、done 関数とコールバック関数の使い分けはどのようにするものなのでしょうか?

    .done(jCallback)

    のように done 関数にコールバック関数を指定するとまとめて一回しか呼ばれないので、コールバック関数が必要ないときはこのようにするのが一般的なのでしょうか。


    ダッチ http://youryella.wankuma.com/

    2014年7月9日 1:01
  • ASP.NET というよりjQueryのajax関数の話になりますが、カスタムのcallbackが必要ないなら指定しなければよいです。

    指定しない場合jQuey側で適当なcallbackを指定してJSONPの返却値を処理しますが、返却値はthen()やdone()のresponseから取り出せるはずです。

    • 回答としてマーク ダッチ 2014年7月9日 2:01
    2014年7月9日 1:37
  • かるあさん、回答ありがとうございます。

    callback を指定しなくても jQuery がデフォルトで指定するので、それが気持ち悪くて必ず指定した方がいいと思っていました。あまり気にする必要がないのですね。

    done関数で JSON の値が取得できるので、done 関数にまとめたいと思います。

    ありがとうございました。


    ダッチ http://youryella.wankuma.com/

    2014年7月9日 2:00