QA@IT

JQueryのJSONP読み込みでコールバック関数名がかぶったときの読み込みについて

10494 PV

以下のように別々のJSONP読み込み時にコールバック関数名が
同じだとエラーになってしまうことがあります。

一方のコールバック関数名変更やsetTimeoutを使用した時間差での
読み込み以外に対処方法はありますでしょうか?

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(function(){
    $.ajax({
        type: 'GET',
        url: 'http://iwb.jp/s/foo.json',
        dataType: 'jsonp',
        jsonp: 'jsoncallback',
        jsonpCallback: 'hoge',
        success: function(json){
            $("#a").text(json.title);
        }
    });

    $.ajax({
        type: 'GET',
        url: 'http://iwb.jp/s/bar.json',
        dataType: 'jsonp',
        jsonp: 'jsoncallback',
        jsonpCallback: 'hoge',
        success: function(json){
            $("#b").text(json.title);
        }
    });
});
</script>
</head>
<body>
<p id="a"></p>
<p id="b"></p>
</body>
</html>

ご存じの方がおられましたらご回答をよろしくお願い致します。

回答

ありがとうございます。
自分の書き方ではコールバック関数名をhogeにしている場合
関数名を変更するかsetTimeoutで時間差で読み込まないと
エラーになることがわかりました。

編集 履歴 (0)

こんにちは、

コールバック関数名は指定しなければjQueryが自動で生成してくれたと思います。
それではだめですか?

<script>
$(function(){
    $.ajax({
        type: 'GET',
        url: 'http://iwb.jp/s/foo.json',
        dataType: 'jsonp',
        jsonp: 'jsoncallback',
        success: function(json){
            $("#a").text(json.title);
        }
    });

    $.ajax({
        type: 'GET',
        url: 'http://iwb.jp/s/bar.json',
        dataType: 'jsonp',
        jsonp: 'jsoncallback',
        success: function(json){
            $("#b").text(json.title);
        }
    });
});
</script>

追記 サンプル

以下のコードで動くことは確認しました(ドメイン名は変更してます)。
サーバー側でjsonp(指定した場合)を見てその関数を呼び出すコードになっているか確認してください。
(jsonpも省略した場合はcallback=~~ として飛んできます。)

不正データへの対処がされていませんので、検証用途以外では絶対にこのままでは使用しないでください。

<html lang="ja">
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</head>
<body>
<div id="a">
</div>
<div id="b">
</div>
<script type="text/javascript">
$(function(){
    $.ajax({
        type: 'GET',
        url: 'http://example.com/jsonp/jsonp_atit.php',
        dataType: 'jsonp',
        jsonp: 'jsoncallback',
        success: function(json){
            $("#a").text(json.data);
        }
    });
    $.ajax({
        type: 'GET',
        url: 'http://example.com/jsonp/jsonp_atit.php',
        dataType: 'jsonp',
        jsonp: 'jsoncallback',
        success: function(json){
            $("#b").text(json.data);
        }
    });    
});
</script>
</body>
</html>

jsonp_atit.php

<?php
ini_set("default_charset","utf-8");
ini_set("mbstring.internal_encoding","utf-8");
//jsonp.php
if(isset($_GET["jsoncallback"])){
  header("Content-type: text/javascript;");
  echo $_GET["jsoncallback"]."( { data : '";
  echo "Sample Data";
  echo "'});";
}
?>
編集 履歴 (2)
  • jsonpCallbackを削除するとエラーで
    両方とも表示されなくなります。
    -
  • アクセスされたアドレスは http://example.com/jsonp/jsonp.php?jsoncallback=jQuery18004323368687182665_1365342107318&_=1365342107324 のようになっていませんか?(ChromeのコンソールのSourcesタブのところで確認できます)またサーバー側がhoge固定になっていませんか? -
  • なお、foo.json, bar.jsonが静的なファイルであればそちらを調整すればよく、いじれないのであれば通常のajaxでGETで取得して名前を変えてevalといった手段になるかもしれません。 -
ウォッチ

この質問への回答やコメントをメールでお知らせします。