Unexpected Token Colon: Resolving JSONP Errors in jQuery.ajax#get

When encountering an "Unexpected token colon" error in jQuery.ajax#get, it's important to understand the nature of JSONP (JSON with Padding) requests. JSONP involves sending JSON data back to a global JavaScript function call on the client side.

To support JSONP, the server must include the "Padding" in the response. The "Padding" consists of a callback function name followed by the JSON data enclosed in parentheses:

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

In this example, the callback function name is jQuery111108398571682628244_1403193212453. The error occurs because JavaScript parses JSONP as JavaScript, where {...} also represents blocks.

To rectify this error, the server needs to include the "Padding" in the response. Additionally, jQuery will typically include a callback query-string parameter with the name of the function. To accommodate this, the server code can use a conditional statement to check for the callback parameter and send the response accordingly:

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

Alternatively, ExpressJS provides a res.jsonp() method that already handles this condition, making it easier to return JSONP responses:

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

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