Javascriptでの外部JSファイル読み込み完了を知る方法は?


Javascriptで外部JSを読み込むように以下のように書くとします。
document.write('<script src="xxxxxx.json"></script>');

ここで、そのJSが読み込まれた後にしたい処理を呼ぶのにどうすればいいのか困っています。
さらに、このようによびたいファイルは3つあり、それぞれともに呼び込み終わったら、これをするというようにしたと思っています。

読み込みたいファイルがJSONなので、変数名がかぶることも考慮したいところではあります。
例:params={~}というJSONを3つ呼び出した場合、paramsという変数がファイルが呼び出されるたびに
上書きされるような気がしています。これもなんとかならないでしょうか?

回答の条件
  • 1人2回まで
  • 登録:2008/02/04 03:53:21
  • 終了:2008/02/11 03:55:02

回答(3件)

id:openseed No.1

openseed回答回数51ベストアンサー獲得回数62008/02/04 09:04:12

ポイント27pt

<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 を記述すれば、スクリプトの読み込みを判定することが出来ると思います。

id:dingding

JSONPにするということですか。考えても見ませんでしたが、それはできないんです。

既存のJSONを使ってなので、できれば他の方法はないでしょうか?

2008/02/04 18:11:41
id:y-kawaz No.2

y-kawaz回答回数1420ベストアンサー獲得回数2252008/02/04 11:04:34

ポイント27pt

JSONを扱うんでしたら、&ltscript src="xxx"&gt で無理やり読み込むのではなく、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/

id:openseed No.3

openseed回答回数51ベストアンサー獲得回数62008/02/05 03:23:14

ポイント26pt

クロスドメインで、タイマーを利用した方法です。

テストは、最小限しかしていないので、ご了承ください。

<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>

id:dingding

なるほど。タイマーでチェックするんですね

2008/02/05 15:53:42
  • id:y-kawaz
    jsonファイルは変更できないとのことなので、params= を取り除けないんですね。
    その場合は、responseText から params= の部分をテキスト処理で取り除くことで上に書いた手法がそのまま使えます。
    http://www.kawaz.jp/tmp/ajax-json/test3.html がそのサンプルです(params=付きのyyyyyy.jsonを読み込んでいます)。


    ちなみに上の回答に書いたとおりだと複数の読み込みが起こった場合に xmlhttp 変数がグローバルで一つしかないので対応できていないですね(^^;
    test2.html は改良版です。これなら複数読み込みが同時に走っても競合せずに正しく処理できると思います。
  • id:openseed
    同一ドメインのときは、 y-kawaz さんの方法が良いですね。
    ※ ドメインを越える場合は、サーバサイドで処理したほうがシンプルですね。


    以下、気分転換に書いた別解です・・・(同一ドメイン)。
    ※ あまり、テストしていないので、ご了承ください。
    <html>
    <head>
    <script>
    function callback(id, contentWindow){
    var code = contentWindow.document.body.getElementsByTagName('*')[0].innerHTML;
    var params = null;
    eval(code);
    alert(params);
    }
    </script>
    </head>
    <body>
    <iframe src="aaa1.json" onload="callback('aaa1', this.contentWindow);" style="display: none;"></iframe>
    <iframe src="aaa2.json" onload="callback('aaa2', this.contentWindow);" style="display: none;"></iframe>
    <iframe src="aaa3.json" onload="callback('aaa3', this.contentWindow);" style="display: none;"></iframe>
    </body>
    </html>

この質問への反応(ブックマークコメント)

トラックバック

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません