Côlons de jeton inattendu : résolution des erreurs JSONP dans jQuery.ajax#get

Lorsque vous rencontrez une erreur "Côlons de jeton inattendus" dans jQuery.ajax #get, il est important de comprendre la nature des requêtes JSONP (JSON with Padding). JSONP implique de renvoyer les données JSON à un appel de fonction JavaScript global côté client.

Pour prendre en charge JSONP, le serveur doit inclure le « Padding » dans la réponse. Le "Padding" est constitué d'un nom de fonction de rappel suivi des données JSON entre parenthèses :

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

Dans cet exemple, le nom de la fonction de rappel est jQuery111108398571682628244_1403193212453. L'erreur se produit car JavaScript analyse JSONP comme JavaScript, où {...} représente également des blocs.

Pour corriger cette erreur, le serveur doit inclure le « Padding » dans la réponse. De plus, jQuery inclura généralement un paramètre de chaîne de requête de rappel avec le nom de la fonction. Pour cela, le code du serveur peut utiliser une instruction conditionnelle pour vérifier le paramètre de rappel et envoyer la réponse en conséquence :

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);
}

Alternativement, ExpressJS fournit une méthode res.jsonp() qui gère déjà cette condition, ce qui facilite le renvoi des réponses JSONP :

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

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