予期しないトークン コロン: jQuery.ajax の JSONP エラーを解決する#get

jQuery.ajax で「予期しないトークン コロン」エラーが発生した場合#get では、JSONP (パディング付き JSON) リクエストの性質を理解することが重要です。 JSONP では、クライアント側のグローバル JavaScript 関数呼び出しに JSON データを送信します。

JSONP をサポートするには、サーバーは応答に「パディング」を含める必要があります。 「パディング」は、コールバック関数名の後に括弧で囲まれた JSON データで構成されます:

jQuery111108398571682628244_1403193212453({"Name":"Tom","Description":"Hello it's me!"})

この例では、コールバック関数名は jQuery111108398571682628244_1403193212453 です。このエラーは、JavaScript が JSONP を JavaScript として解析するために発生します。ここで、{...} もブロックを表します。

このエラーを修正するには、サーバーは応答に「パディング」を含める必要があります。さらに、jQuery には通常、関数の名前を含むコールバック クエリ文字列パラメータが含まれます。これに対応するために、サーバー コードは条件ステートメントを使用してコールバック パラメーターをチェックし、それに応じて応答を送信できます。

var callback = req.query.callback;
var data = JSON.stringify({
    Name : "Tom",
    Description : "Hello it's me!"
});

if (callback) {
    res.setHeader('Content-Type', 'text/javascript');
    res.end(callback   '('   data   ')');
} else {
    res.setHeader('Content-Type', 'application/json');
    res.end(data);
}

別の方法として、ExpressJS にはこの条件をすでに処理している res.jsonp() メソッドが用意されており、JSONP 応答を返しやすくなっています。

app.get( '/', function( req, res ) {
    console.log( 'req received' );

    res.jsonp({
        Name : "Tom",
        Description : "Hello it's me!"
    });
});