動的にscript要素を追加してやることによってクロス・ドメインのJavaScriptファイルを読み込むというテクニック。Firefoxの場合は動的に追加するscript要素のonload属性で読み込んだJavaScriptファイルを処理するfunctionを指定してやれば問題ない。しかし、これをクロス・ブラウザで実現するには違ったアプローチが必要になる。そのひとつがJSON and the Dynamic Script Tag: Easy, XML-less Web Services for JavaScriptで取り上げられているJSONScriptRequest。XmlHttpRequestと比較するとかなり機能が限定されたものだけど、扱いが手軽で限定された環境ではなかなか威力を発揮するっぽい。
JSONScriptRequestはどうやらJSONPと呼ばれている、JSONデータをcallback関数経由で渡すようにするアプローチを利用するためのクラス。つまり動的に読み込むJavaScriptファイルは、
callback({
foo: 'This is foo.',
bar: 'This is bar.',
foobar: 'This is foobar.'
});というようにcallback関数が呼ばれる形のものでなければならない。そして、
<html>
<head>
<title>JSONScriptRequest Test</title>
<script type="text/javascript" src="jsr_class.js"></script>
</head>
<body>
<h1>JSONScriptRequest Test</h1>
<script type="text/javascript">
var oJsr = new JSONscriptRequest('http://example.com/json/data.json?dummy=1');
oJsr.buildScriptTag();
oJsr.addScriptTag();
function callback(data) {
alert(data.foo);
alert(data.bar);
alert(data.foobar);
oJsr.removeScriptTag();
}
</script>
</body>
</html>HTML(やJavaScript)ファイル側でcallback関数を定義しておく必要もある(サンプル)。
つまるところ、Webサービス側でJSONPに対応していないと使い道がない。Yahoo! Search Web Servicesなどでは対応しているが、やはり絶対数は少ない。
しかし、Amazon Web ServicesのXSLTサービスなどの場合は、XSLファイルを工夫すればJavaScriptファイルを自由に作り上げることができるので、XSLファイル側で対処できる。labs.hail2u.net/amazon/やlabs.hail2u.net/amazon/asamashi/では実際に対処してみた。それぞれのHTMLファイル内のJavaScriptコードや利用しているXSLファイルを見てくれればどういう感じなのかわかるかもしれない。無闇にコードが長いので読みづらいけど。
jsr_class.jsはremoveScriptTag()とか長くて書くの面倒な感じなので、テキトウに書き直すのが良いかも。