にゃんこが可愛くて作ってよかったなあ、と。(^^)
このウィジェットは、クライアント：JQuery・サーバAPI：CGI の構成です。
JQueryの作成には、以下を参考にしました。
作成したソースコードはこちらwidget299.jsで全文取得できます。
main() のところで、299サイトからJSONPでデータを取得するんですけど、
以前、書いてたやり方で通らなかったので、あれ？と。
よく仕様を理解してなかったな～、と思い、色々調べたのですが、
サーバAPI側と合わせて纏めてあるサイトが中々見当たらず・・・・
以下、間違っている部分があるかもしれないですが、自分なりの理解を纏めておきます。
クライアント：JQueryの処理
{user_name:un} の部分は、サーバAPIに渡すパラメタです。
複数指定したい場合は、カンマで区切って続ければ良いです。
{a:x,b:y,c:z}のような感じです。
var jsonp_url = "http://junmoku.com/pl/get299WidgetContents.pl?callback=?";
$.getJSON(jsonp_url,{user_name:un},function(data) {
$.each(data, function(i,item){
//取得したJSONデータの処理
});
});
クライアント：JQuery側のポイントは、urlの末尾に ?callback=? を付けることです。
これは、どーゆー意味なんでしょうか？
urlの後ろに?が続いているので、GETです。
callback=AAA でパラメタと値を、url先に渡している事になります。
callback=? と値が「?」になっていますが、
この値は、JQueryが自動的に生成してセットしてくれるようです。
実は、これ、callback用の関数名を渡しているようです。
ちょっと、理解しにくいんですが、JSONPだと、最終的にサーバAPIの応答を受けて、
クライアントの関数が実行される事になります。
本来は、クライアント側に function AAAAA(){ のような関数があって、
サーバAPIの応答で実行される形態になると思うのですが、
この関数名を、JQueryが自動生成してくれるようです。
そうして、サーバの応答によって実行される部分は、function(data){ 以降の部分になります。
ここだと、JSONのデータを処理するeachの部分が実行されることになります。
サーバAPI：CGI
サーバAPIの役割はJSONPデータを返すことです。
JSONPは関数コールの形なので、関数名() という事になります。
この関数名は、前述のとおり、JQuery側が自動生成し、GETパラメータで渡してきます。
use utf8;
use CGI;
use JSON;
//JQueryからのcallbackパラメタを受け取る
my $callback = $q->param('callback');
print $q->header(-type=>'text/javascript',-charset=>"utf-8");
//JSONP
my $JSON = $callback.'([';
//JSONデータをセット
$JSON .= '])';
print $JSON;
サーバAPI側は、callback関数名を先頭に付けて、callback関数名( JSONデータ )の形式で応答してあげます。
以上です～。
分かりにくいところあるかもしれませんが、コメント頂けば、自分の理解の範囲でお応えしたいと思います。
また、間違っている理解がありましたら、易しめの情報提供を頂けると有り難いです。