Uncaught SyntaxError: Unexpected token : - data still coming through

Question

I'm very new to JSON and JSONP.

I've read through each of the posts that are recommend by the SO search for this error, but I can't seem to get a handle on it.

I have the following code to grab data from an EXTERNAL website:

$.ajax({
    url: "https://url.com/authenticate?login=test&apiKey=test",
    dataType: 'jsonp',
    success:function(json){
      console.log("login successful");
      }
  });  

When I load the page, I get:

Uncaught SyntaxError: Unexpected token :

and when I click on the error in Chrome, I see

{"Status":{"Code":"2","Message":"Authentication Succeeded","Success":"true"}}

with a little red x after "true"})

From this, it seems as though I have succeeded in logging in, but I'm doing something else wrong because my console.log("login successful"); never fires. What am I doing wrong?

P.S.

I've tried dataType: 'json' but I get the No 'Access-Control-Allow-Origin' header is present as I'm on a different server, so I went back to jsonP as this is cross-domain.

I've also tried the above url as url: "https://url.com/authenticate?login=test&apiKey=test&callback=?", as I've read I need a callback, but I don't really understand what the functionality of callback is and either way, the error that gets returned (whether &callback=? is in there or not) is:

authenticateUser?login=test&apiKey=test&callback=jQuery111107732549801003188_1423867185396…:1 Uncaught SyntaxError: Unexpected token :

so it's adding the callback in either way....

Also, from the API I'm trying to access: "this uses the REST protocol, and provides data structured as XML or JSON"

This is not a duplicate of the linked post as the information in the linked post does a great job of explaining what JSONP is, but doesn't answer my specific question regarding why I get data back (so my call is successful,) but why I still get an error and cause my script to stop.

Answer 1

The API you're sending the AJAX request doesn't implement JSONP. It ignores the callback= parameter, and just returns ordinary JSON. But when the browser tries to process this as JSONP, it gets a syntax error because it's not properly formatted. JSONP is a JSON object wrapped in a call to the specified callback function, e.g. it should be sending back:

jQuery111107732549801003188_1423867185396({...});

where {...} is the JSON object you're trying to retrieve. But it's just returning {...}.

You should implement this using a PHP script on your own server. It can be as simple as this:

<?php
$username = urlencode($_POST['user']);
readfile("https://url.com/authenticate?login=$username&apiKey=test");

Then your AJAX call would be:

$.ajax({
    url: "yourscript.php", 
    type: "post",
    dataType: "json",
    data: { user: "test" },
    success: function(json) {
        console.log("login successful");
    }
});