Question

       $.ajax({
  beforeSend: function(xhr) {
 xhr.setRequestHeader('Authorization', "Basic YWRtaW46YWRtaW4=");        
},
   url: "https://test.com/incident.do?JSON&callback=?&sysparm_action=getRecords",
   dataType: "json",
   contentType: "application/json",
   method: 'GET',
   success: function(a,b,c) { 
    alert(a);
         }          
 });

I call this function with a button press… Firebug shows that I get this JSON response (which I know is valid) [truncated for clarity]

{
    "records": [
        {
            "service_offering": "",
            "number": "INC0000009"
        },
        {
            "service_offering": "",
            "number": "INC0000010"
        }
]
}

Firebug shows the error “invalid label
https://test.com/incident.do?JSON&callback=jsonp1279049933243&sysparm_action=getRecords
Line 1

How can I fix this?
Thanks!

Answer 1

Your response is JSON, which is valid, but that’s not what jQuery’s looking for. When you specify &callback=? in the URL, jQuery is expecting a JSONP response, which looks different, your response should be

jsonp1279049933243({
  "records": [
    {
        "service_offering": "",
        "number": "INC0000009"
    },
    {
        "service_offering": "",
        "number": "INC0000010"
    }
  ]
});

What happens when you specify callback=? is that jQuery generates a name for your success function, in this case jsonp1279049933243, JSONP works by just generating a <script> tag in the page, so when it fetches that url, it’s really just including a JavaScript file, running a function, but instead of this:

<script type="text/javascript">
  jsonp1279049933243({ "records": [....] });
</script>

What’s effectively happening now is:

<script type="text/javascript">
  { "records": [....] }
</script>

…which isn’t valid JavaScript. Now of course it’s loaded via src=https://test.com/incident.do?JSON&callback=jsonp1279049933243&sysparm_action=getRecords, but the invalid syntax/label error is the same.