Swing好きの僕としては、
MashUpはSwing派(ちなみにSmashUpと言うらしい)なのだが、
再びJavascriptに手を染めている秋の夜長。
クライアントサイドでのMashUp。
AJAXでMashUpしようにも、
クロスドメイン制限があるため、
サーバサイドでのMashUp結果を頂戴するのが常だった。
これじゃぁ、AJAXがただの｢ホワイトアウトしない技術｣になってしまう。
(まぁ、実際そうなのかもしれないけれど。)
そこで重くない腰を上げて意気揚々と調べていると、
なにやらたくさん情報がでてくる。
どうやら、思ったよりも浦島なようだ。
JSONPとかいう技術だ。
JSONというのは、
ご存知かどうかは知らないが、
｢XMLの変わりにこのフォーマット使ってみない？｣なメッセージ形式で、
Javascriptでeval()すると、
Javascriptのオブジェクトが出来上がるという優れもの。
可読性も高いのでいいことばかり。
ちなみにJavaから使う場合に特にいいことはないのが残念。
で、JSONP。
実は、これはAJAXと同じく非同期通信なのだが、
実現方法が全く異なる。
キーは<script>タグ。
実は<script>タグのsrc属性に指定された*.jsファイルは、
ドメインに制限されずにリクエストすることができる。
そして、そのリクエストはブラウザにより非同期に実行される。
さらに、読み込んだ時点で実行時評価される。
勘のいい君ならもうお気付きかもしれないが、
この<script>タグのsrc属性に、
リクエスト先URLを指定して、結果をJSON形式で頂戴する。
その時に、結果をコールバックして欲しい関数名でくくってもらう。
例えば、
http://hoge.com/search?query=foo&callback=result_func
というURLがJSON形式の結果を返すとしよう。
(queryが検索文字変数、callbackがコールバック変数。)
このURLをsrc属性に指定して動的に<script>タグを作成して、
<head>タグと</head>タグとの間に配置する。
そうすると、ブラウザが勝手にsrcで指定したURLにアクセスする。
結果は次のようなものだとする。
{"Result":
[{"Title":"foo",
"Summary":"bar"
},
{"Title":"hoge",
"Summary":"hmm"
}]
}
この結果は正確には以下のように加工されてサーバから返される。
result_func(
{"Result":
[{"Title":"foo",
"Summary":"bar"
},
{"Title":"hoge",
"Summary":"hmm"
}]
}
);
ブラウザはこれを勝手に実行する。
これが実行されると、
関数result_func(result)が呼ばれることになる。
result_func関数ではeval(result)を実行すれば良い(セキュリティに注意)。
こうして、ドメインを超えて非同期にサーバと通信できるようになる。
理屈が分かればなんてことはない単純なことで、
コードを書くのも数行程度の容易さなのだが、この｢思い付き｣には感服。
この軽く無茶な感じが、戦国時代としてのWeb2.0に相応しい。
