<script>
function callback(id, data){
// ～
}
</script>
<script src="xxxxxx_01.jsonp"></script>
<script src="xxxxxx_02.jsonp"></script>
<script src="xxxxxx_03.jsonp"></script>
として、xxxxxx_01.jsonp は、
callback("xxxxxx_01", {aa: 1, bb: 2, cc: 3});
のようにしては、いかがでしょうか？
※ JSファイルの場合は、外部ファイルの一番最後に、callback を記述すれば、スクリプトの読み込みを判定することが出来ると思います。
JSONを扱うんでしたら、<script src="xxx"> で無理やり読み込むのではなく、AJAXで xxxxxx.json 読み込み、responseText を eval するのが良いんじゃないでしょうか？
その際 params={～} となっている外部スクリプトは params= を削除して {～} の部分だけにしておくのがコツです。
サンプルコードを作ってみました。
<html> <script> function getXMLHttpRequest() { try { return new XMLHttpRequest(); } catch(e) { try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch(e2) { try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch (failed) { return false; } } } } var xmlhttp = getXMLHttpRequest(); xmlhttp.open('GET', 'xxxxxx.json', true); xmlhttp.onreadystatechange = function() { if(xmlhttp.readyState == 4) { if (xmlhttp.status == 200) { var params = eval('(' + xmlhttp.responseText + ')'); alert('foo=' + params.foo + "\n"); } else { alert('AJAX failed'); } } } xmlhttp.send(null); </script> <body> AJAX and JSON </body> </html>
・getXMLHttpRequest関数はXMLHttpRequestオブジェクトをIEやFirefoxなどブラウザの違いを吸収するものです。
・xmlhttp.readyState == 4 はリクエストが完了したステータスをチェックしています。
・xmlhttp.status == 200 はリクエスト成功をチェックしています。ファイルが見つからない場合は 404 等が返ってきます。
・この2つのif文をくぐった場所が、xxxxx.js の読込完了時に実行される部分になります。
・ここでevalを使いxxxxx.jsonの中身を評価してローカル変数 params にセットしています。
・その後のアラートはただのテストです。
上記サンプルは以下のURLに置いておきましたので試してみてください。
http://www.kawaz.jp/tmp/ajax-json/
クロスドメインで、タイマーを利用した方法です。
テストは、最小限しかしていないので、ご了承ください。
<html>
<head>
<script>
function callback(src, params){
alert(src + ":" + params);
}
var scripts = ['aaa1.json', 'aaa2.json', 'aaa3.json'];
var params = null;
function loadJson(n){
var s = document.createElement('script');
s.charset = 'utf-8';
s.src = scripts[n];
document.getElementById('scripts').appendChild(s);
var limit = 10;
var t = setInterval(function(){
if(limit-- == 0){
clearInterval(t);
callback(scripts[n], null);
if(++n < scripts.length){
loadJson(n);
}
}else if(params != null){
clearInterval(t);
callback(scripts[n], params);
params = null;
if(++n < scripts.length){
loadJson(n);
}
}
}, 500);
}
</script>
</head>
<body onload="loadJson(0);">
<div id="scripts" style="display: none"></div>
</body>
</html>
なるほど。タイマーでチェックするんですね
JSONPにするということですか。考えても見ませんでしたが、それはできないんです。
既存のJSONを使ってなので、できれば他の方法はないでしょうか？