Uncaught SyntaxError:予期しないトークンが発生しました。

MooToolsのスクリプトでAJAXコールを実行しているのですが、Firefoxでは問題なく動作しているのですが、ChromeではUncaught SyntaxError:Unexpected token : エラーが発生しますが、原因がわかりません。どこに問題のあるコードがあるのかを調べるためにコードをコメントアウトしても何も出てこないので、返されるJSONに問題があるのではないかと考えています。コンソールで確認すると、返されたJSONは次のようになっています。

{"votes":47,"totalvotes":90}

特に問題はないと思うのですが、なぜこのようなエラーが発生するのでしょうか?

vote.each(function(e){
  e.set('send', {
    onRequest : function(){
      spinner.show();
    },
    onComplete : function(){
      spinner.hide();
    },
    onSuccess : function(resp){
      var j = JSON.decode(resp);
      if (!j) return false;
      var restaurant = e.getParent('.restaurant');
      restaurant.getElements('.votes')[0].set('html', j.votes + " vote(s)");
      $$('#restaurants .restaurant').pop().set('html', "Total Votes: " + j.totalvotes);
      buildRestaurantGraphs();
    }
  });

  e.addEvent('submit', function(e){
    e.stop();
    this.send();
  });
});

同じ問題を抱えている人のために参考までに言っておくと、私の場合、サーバーがJSONをapplication/jsonとして送り返すようにするだけで、デフォルトのjQueryハンドラは問題なく動作しました。

解説 (6)

これは私に起こったことですが、原因は上記の理由ではありませんでした。jQueryのgetJSONというコマンドを使い、JSONPを使うためにcallback=?を追加して(クロスドメインにする必要があったので)、JSONコード{"foo":"bar"}を返していたのですが、エラーが出てしまいました。

これは、jQuery17209314005577471107_1335958194322({"foo":"bar"})のようなコールバック・データを含めるべきだったからです。

これを実現するために使用したPHPコードは以下の通りで、JSON(コールバックなし)を使用した場合は劣化します。

$ret['foo'] = "bar";
finish();

function finish() {
    header("content-type:application/json");
    if ($_GET['callback']) {
        print $_GET['callback']."(";
    }
    print json_encode($GLOBALS['ret']);
    if ($_GET['callback']) {
        print ")";
    }
    exit; 
}

将来的に誰かの助けになれば幸いです。

解説 (3)
ソリューション

先ほど問題を解決しました。標準的なRequestの呼び出しでは何か問題が発生していたので、代わりに使ったのがこのコードです。

vote.each(function(element){                
  element.addEvent('submit', function(e){
    e.stop();
    new Request.JSON({
      url : e.target.action, 
      onRequest : function(){
        spinner.show();
      },
      onComplete : function(){
        spinner.hide();
      },
      onSuccess : function(resp){
        var j = resp;
        if (!j) return false;
        var restaurant = element.getParent('.restaurant');
        restaurant.getElements('.votes')[0].set('html', j.votes + " vote(s)");
        $$('#restaurants .restaurant').pop().set('html', "Total Votes: " + j.totalvotes);
        buildRestaurantGraphs();
      }
    }).send(this);
  });
});

もし誰かが、標準のRequestオブジェクトがなぜ私に問題を与えていたのか知っていたら、ぜひ教えてください。

解説 (6)