ScriptSrcIOとJSONP：DSでも動くajaxの作り方

「頭いいな～」とちょっと感心したテクニックを知ったのでメモ。ScriptSrcIOとJSONPの話です。

Webプログラマーでない人にはちんぷんかんぷんだと思うので読み飛ばしてOKです。笑

ajaxで使われるXMLHTTPRequestって、そのHTMLが置いてあったサーバ以外との通信ができない（クロスドメイン通信ができない）ので、クロスドメイン通信がしたかったらサーバ側にプロキシ用のCGIを置いてやる必要があったわけです。

また、そもそもXMLHTTPRequest命令が使えないブラウザなんかもあったりして（携帯のフルブラウザとか、DSとか、はたまはた“古ブラウザ”とか）、何かと制限が多かったのですが…。

なんと、ajaxを、「scriptタグを動的に生成する」ことで行っちゃおうというアイデアを発明した人がいて、これがうまく動くようなんですよ実際。DSとかでも動くようで。

scriptタグって、srcに指定されたURLからjavascriptを取ってきて実行するっていうHTMLの命令ですが、これはクロスドメインが可能なので、じゃあそのURLにパラメータつけて渡してやればいいじゃん、という。

最近の「ブログパーツ」系は大抵このテクニックを使ってますよね。地図とかブログに貼り付けたりするアレです。

で、そのテクニックを使って非同期通信の仕組みを作っちゃったのがこれ。
http://archive.dojotoolkit.org/nightly/tests/io/test_ScriptSrcIO.html

ScriptSrcIOという名前がついてるみたいだけど、正式名称はどうなるかな？

ScriptSrcIOのテクニックのポイントの一つが、「戻り値をJSONPで返す」ということ。

ちなみにこれも知らなかったのだけど、JSONPというプロトコルも最近主流になってきているみたいで、これはJSONのレスポンスを「関数呼び出し」の形で返して貰うというもの。

どういうことかというと、例えばScriptSrcIOを使ったときに、戻りをJSONで返してしまうと、それは単にjavascriptエラーになってしまうわけです。

なので、せめて

var result = JSON形式のデータ;

とか、

foo( JSON形式のデータ );

の形で返してくれないといけないのですが、これをプロトコルとして定めたのがJSONP。

簡単に言うと、リクエストに文字列をつけると、JSONデータに()をつけた上でその文字列を頭につけて返してくれる、というもの。

例えば

jsonpwebservice.php?jsonp=onRequestDone

とリクエストすれば、

onRequestDone( JSON形式のデータ );

という形で返してくれます。
つまり、自動的にリクエスト完了時に指定した関数を呼び出してくれるわけです。

まさにScriptSrcIOにうってつけ。ていうかそのためのプロトコルなのかな？JSONPは。

もちろんScriptSrcIOは、呼び出される側がJSONPに対応していないと使えないのだけど、既にAmazonやYahoo!、del.icio.us、Googleなどでも使えるようになっているようで、今後主流になりそう。

ま、ブラウザのセキュリティ強化で将来使えなくなる可能性も大なんだけどね。