ASP.NET MVC で JSONP

前回の ASP.NET MVC で CORS では、
JSON Web サービスへのクロスドメインでのアクセスを CORS で実現するための方法を紹介しました。
今回はもう 1 つの方法である JSONP について説明します。

JSONP は、データを JSON ではなく、JavaScript として受け取って実行するという、
トリック的な方法でクロスドメインでのアクセスを実現する仕組みです。

具体的には、Ajax 通信完了後の処理を次のような関数として定義しておき、

function callbackFunc(data) {
    // 通信後の処理。
    // data には、Web サービスの戻り値であるオブジェクトが渡されます。
}

このコールバック関数の名前を URL のクエリ文字列で渡します。

/json/api123?callback=callbackFunc

この HTTP 要求に対し、サーバー側からの HTTP 応答では次のように (JSON ではなく) JavaScript を返します。

callbackFunc({ prop1: 123, prop2: "value123" });

このスクリプトをブラウザー上で実行させることで、コールバック関数を呼び出すという仕組みです。

 

この仕組みを ASP.NET MVC で実現するには、
前回の ASP.NET MVC で CORS で作成したコントローラーを次のように変更します。
クエリ文字列の中に callback が含まれている場合は JavaScript を作成して返します。


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Script.Serialization;

namespace CorsMvc.Controllers
{
    public class JsonController : Controller
    {
        // GET /json/uuid
        public ActionResult Uuid()
        {
            var data = Guid.NewGuid();
            return Json(data);
        }

        new ActionResult Json(object data)
        {
            Response.Headers["Expires"] = "-1";
            Response.Headers["Access-Control-Allow-Origin"] = "*";

            var callback = Request.QueryString["callback"];

            if (string.IsNullOrWhiteSpace(callback))
            {
                return Json(data, JsonRequestBehavior.AllowGet);
            }
            else
            {
                var serializer = new JavaScriptSerializer();
                var json = serializer.Serialize(data);
                return JavaScript(string.Format("{0}({1});", callback, json));
            }
        }
    }
}


 

次に、クライアントとなる HTML を記述します。
jQuery を利用する場合は、jQuery.getJSON メソッドの引数の URL を、

/json/uuid?callback=?

のように、コールバック関数の名前が入る部分を ? にしておきます。
すると、jQuery の内部でコールバック関数の定義が作成され、? の部分はその名前で置き換えられます。


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>JSONP Test</title>
    <script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.0.min.js" type="text/javascript"></script>
</head>
<body>
    <div>
        <h1>JSONP Test</h1>
        <h3>GET /json/uuid</h3>
        <button id="GetUuidButton">Generate</button>
        <pre id="GetUuidResult"> </pre>
    </div>
    <script type="text/javascript">
        $(function () { 
            $("#GetUuidButton").click(function () {
                $.getJSON("http://localhost:58201/json/uuid?callback=?", function (data) {
                    $("#GetUuidResult").text(data);
                });
            });
        });
    </script>
</body>
</html>


 

これで、JSONP によるクロスドメイン通信ができるようになりました。

クロスドメインでのアクセス

なお jQuery では、GET でアクセスする場合のみこの方法が有効になるようです。

 

バージョン情報
ASP.NET MVC 5.1.2
jQuery 2.1.0

参照
jQuery.getJSON() – JSONP
jQuery $.getJSONによるJSON・JSONP読み込み
ASP.NET MVC で CORS

カテゴリー: .NET Framework. タグ: . 1 Comment »

コメント / トラックバック1件 to “ASP.NET MVC で JSONP”

  1. ASP.NET MVC で CORS | Do Design Space Says:

    […] 次回に続きます。 → ASP.NET MVC で JSONP […]


コメントを残す

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

WordPress.com ロゴ

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

Twitter 画像

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

Facebook の写真

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

Google+ フォト

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

%s と連携中

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