読者です 読者をやめる 読者になる 読者になる

だるろぐ

とてもだるだるした日記です http://about.daruyanagi.jp/

お知らせ

WebMatrix 3: JSON と JSONP

WebMatrix JavaScript ASP.net Web Pages

f:id:daruyanagi:20130421155340p:plain

一連の記事では、FeedCount の結果を JSON でやり取りしていました。

JSON

サーバーサイド

// ~/FeedCount.cshtml

Response.Clear();
Response.ContentType = "application/json";
Response.Write(Json.Encode(data));
Response.End();

渡されるデータ(例)

{"livedoor":6,"total":6}

クライアントサイド

// ~/Script/SocialButtons.js

$.ajax({
    url: '/FeedCount/' + url,
    dataType: 'json',
    success: function (json) {
        element.text(json.total || 0);
    }
});

けれど、Twitter や Facebook における共有数は JSONP で処理していました。それに合わせて、FeedCount も JSONP で処理できないか? と思ったのですが、$.ajax の dataType を 'jsonp' にするだけでは動きません。サーバーサイドにも手を加えなければならないみたい。

JSONP

どうやればいいのかよくわからないとつぶやいたところ、つもりんが教えてくれました。



要は、JSON そのままではなく JavaScript の関数にして(コールバック関数)送り返せばいいのですね。

f:id:daruyanagi:20130422195758p:plain

問題はコールバックの関数の名前をどうするかですが、jQuery の場合、指定しなければ勝手に適当な名前を付けて GET[callback="***"] で送ってくるようです。というわけで、Request["callback"] とか Request.QueryStrings["callback"] で取得できますね。

サーバーサイド

// ~/FeedCount.cshtml

Response.Clear();
Response.ContentType = "application/json";
Response.Write( // 変更 !
    string.Format("{0}({1})", Request["callback"], Json.Encode(data))
);
Response.End();

渡されるデータ(例)

jQuery******({"livedoor":6,"total":6});

クライアントサイド

// ~/Script/SocialButtons.js

$.ajax({
    url: '/FeedCount/' + url,
    dataType: 'jsonp',  // <- 変更 !
    success: function (json) {
        element.text(json.total || 0);
    }
});

ちゃんと動くかな?

Request["callback"] が空であれば JSON データで返すなど、改良の余地はあるかもしれない。