WebMatrix 3: JSON と JSONP

執筆日時:

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 データで返すなど、改良の余地はあるかもしれない。