ホーム > ASP.NET, Javascript, Visual Basic > ASP.NET Web APIのサービスをJSONPで呼び出す。

ASP.NET Web APIのサービスをJSONPで呼び出す。


MSDNフォーラムをのぞいたら、こんなスレッドがあったのでWeb APIの入門を兼ねていじってみます。

クロスドメインリクエストへの対応については松崎さんのブログで詳しくまとまっています。

JSONP などクロス ドメイン (Cross-Domain) 問題の回避と諸注意

Web Apiの追加

まずは何も考えずに、WebApiを一つ追加しましょう。

image image

名前はとりあえずUserControllerとかにしておきます。

image 

とりあえずそのまま動作を確認してみる

この状態で http://host/api/user/http://host/api/user/1 といったURLをリクエストすれば、[ “value1”, “value2" ] や “value” といったJSON文字列が取得できるはずです。

FiddlerやChromeのAdvanced Rest Clientなんかから確認してみましょう。

一応それっぽい文字列が帰ってきていますね。

image

jQueryから呼び出してみる。

jQueryのajax関数から呼び出すとするとこんなかんじですね。

$("#getUser").on("click", function () {
    var userId = $("#userId").val();
    $.ajax({
        url: "http://localhost:45924/api/user/" + userId,
        type: 'GET',
        dataType: 'json'
    }).success(function (data) {
        alert(data);
    }).error(function(data) {
        alert(data);
    });
});

ちゃんと返ってきました。

image

Web ApiをJSONPに対応させる。

Web ApiでJSONP形式で値を返したい場合は、NugetパッケージのWebApiContrib.Formatting.Jsonpを使うと簡単に実現できます。前述のパッケージを導入後、Global.asaxやWebApiConfigなどのクラスでコールバック付き(?callback=関数名)のリクエストを受け付けた場合にJSONP形式に整形するFormatterを登録します。

Public Module WebApiConfig
    Public Sub Register(ByVal config As HttpConfiguration)
        ' Web API の設定およびサービス

        ' Web API ルート
        config.MapHttpAttributeRoutes()

        config.Routes.MapHttpRoute(
            name:="DefaultApi",
            routeTemplate:="api/{controller}/{id}",
            defaults:=New With {.id = RouteParameter.Optional}
        )

        config.AddJsonpFormatter()
    End Sub
End Module

ちょっと見えづらいですが、Responseタブの中身を見ると、JSONP形式(a([“value1”, “value2”]))で結果が帰ってきたのを確認できます。

image

jQueryから呼び出す。

jQueryを使っている場合は、ajax関数のdataTypeパラメーターに”jsonp”を指定するだけですね。

$(function() {
    $("#getUser").on("click", function () {
        var userId = $("#userId").val();

        $.ajax({
            url: "http://localhost:45924/api/user/" + userId,
            type: 'GET',
            dataType: 'jsonp'
        }).success(function (data) {
            alert(data);
        }).error(function(data) {
            alert(data);
        });
    });
});
広告
カテゴリー:ASP.NET, Javascript, Visual Basic
  1. ダッチ
    2014年7月9日 11:09 AM

    回答してくださりありがとうございました。
    教えていただいた内容で動作するようになりました。

    まだ localhost で クロスドメインリクエスト のテストをどうするのかなど、疑問はつきませんがひとつずつ調べながら解決しようと思います。

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

  2. ダッチ
    2014年7月9日 12:42 PM

    教えていただいてすみません。
    これから確認してみます。

  1. No trackbacks yet.

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。