« ClientCallback機能を使ったTreeViewの展開 | トップページ | .NETのリフレクション »

2006年9月20日 (水)

XMLHttpRequestを使わずにデータを受信する

XMLHttpRequestを使ったAjaxでの通信は、セキュリティ上の制限により他ドメインのサーバーにはアクセスできません。
サーバー側のプログラムを自分で記述できる場合は、一旦中継してデータを取得し好きな形式に変換するプログラムを書けばよいのですが、 例えばこのブログのようにJavaScriptしか記述できない場合はそうもいきません。

クライアントがXMLHttpRequestを使わずに他ドメインのサーバーからデータを取得できれば…ということになるわけですが、それを実現する 方法の1つとして、サーバーが結果をJavaScriptのコードで返すというものがあります。

例えば、
http://www.hoge.com/service.aspx?param=xxxxx
のようにリクエストすると、paramの内容に応じた結果をJSONデータを含むJavaScriptコードで返してくれるサービスがあった場合、 クライアント側では、
<script type="text/javascript" src="http://www.hoge.com/service.aspx?param=xxxxx"></script>
という風にしてJavaScriptコードを取り込めば、ドメインとは無関係にデータを利用できます。

scriptタグのsrc属性に指定するURLは他ドメインであっても問題ないという特性を利用したもので、 ちょうど、imgタグのsrcに指定する画像ファイルはどこのサーバーにあっても問題なく画像が表示されるのと同じですね。

このscriptタグをdocument.createElementで動的に生成すれば、XMLHttpRequestを使った場合と同様に動的にデータを取得して表示することが 可能になります。
ただし、その場合は、JavaScriptのコードが読み込み終わった時点で関数を呼び出すなどして読み込みが完了したことを通知しなければ、 クライアント側ではデータを処理できません。


わかり辛いと思いますので、少し具体的に例を書いてみます。

http://www.hoge.com/service.aspx?callback=handle&param=xxxxx
とリクエストすると、
handle({'result':{'item1':'value1'}});
という結果を返すサービスがあったとします。
URLパラメータのcallbackには通知を受ける関数名を指定します。

このサービスを利用する際、クライアントは以下のようなコードでデータを受信することが出来ます。

function getData()
{
    var script = document.createElement('script');
    script.src = 'http://www.hoge.com/service.aspx?callback=handle&param=xxxxx';

    document.body.appendChild(script);
}

function handle(data)
{
    alert(data.result.item1);
}
ボタンを押すなどのイベント時に getData() を呼び出すと、"value1" が表示されます。

こういった利用方法を想定してサーバーが返すデータはJSONP(JSON with Padding)と呼ばれていて、Yahoo! US、Amazon、Flickrなどは すでにこの形式でのサービスも提供しています。

でも、JavaScriptコードを返すということで、セキュリティ上好ましくないという意見もあります。

|

« ClientCallback機能を使ったTreeViewの展開 | トップページ | .NETのリフレクション »

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/12438/11966689

この記事へのトラックバック一覧です: XMLHttpRequestを使わずにデータを受信する:

« ClientCallback機能を使ったTreeViewの展開 | トップページ | .NETのリフレクション »