Webデザイナーほかクリエイター達の生の声をお届け！

こんばんは、Tyです。
今回はJavaScriptで異なるドメインからデータを取得する方法の
一つでありますJSONPのお話です。

通常、AJAXでは外のドメインへのリクエストに制限がかけられており、
XHTTPRequestを異なるドメインに送ることが出来ません。

今回お話しするJSONPでは、リクエスト先のサーバーから
JSONデータを引数としたコールバック関数を返すことで、
クライアント側でデータをハンドルできる仕組みになっています。

これを使うことで、JavascriptのみでYouTubeから動画を検索する
フォームなんかも作れてしまいます。

まず、クライアント側では
データを扱うコールバック関数を定義する必要があります。

function callback(jsondata) = {//データを扱う処理}

また、サーバー側では、このコールバック関数の呼び出しを
レスポンスとして返信します。この際にcallbackの引数として
JSONのデータを入れることで、異なるドメインのJavaScriptに
データを引き渡すことが出来ます。

callback("{ data1: hoge, data2:piyo }");

最後に、このレスポンスを受け取るJavaScriptタグを生成します。

<script type="text/javascript" src="{URL}" id="{id}" ></script>

スクリプトタグから呼び出されたコードが、クライアント側のコールバック関数を
呼び出すことで、最終的にはクライアント側のコールバック関数内で
JSONデータを処理できます。

また、クライアント側の処理をまとめたソースコードが
下記のサイトで公開されています。
ソースコードの中に利用方法も記述されています、
http://www.xml.com/pub/a/2005/12/21/json-dynamic-script-tag.html

また、参考サイトのほうにもこちらのソースを利用した具体例が載っています。

割と簡単にクライアント側のデータが取得できてしまうため、
クロスドメイン制限をサーバー側でかけてない場合は、
間違っても機密情報を受け渡してはいけません。
 

参考サイト：
http://yusukebe.com/tech/archives/20070905/140422.html
http://www.baldanders.info/spiegel/remark/archives/000222.shtml

• 次の記事：北京オリンピック2008開幕！
• 前の記事：オンラインアルバム