JSONP Ajax callback not firing

Question

I'm trying to use JSONP to call a webservice, passing in an integer to get two integers out. Normally I'd use regular JSON, but I'm calling to a different port number (to a webservice, from a website, but both in the same domain).

For context, I'm passing in the user id to get out the number of unread tasks and notices, to populate some figures shown on the screen.

Here's the code:

var url = "localhost:13742/api/notices/get" ;
$.getJSON(url + "?callback=?", $("#__UserId").val(), function (response) {
    console.log("Number of unread tasks- " + response.UnreadTasks + ". Number of unread notices- " + response.UnreadNotices);
});

As the title suggests, the callback I've specified isn't being fired- I'm not getting any logs, including errors. I know the server-side code is working because I can manually get to it through the browser- I just pass in the query string and it works fine (returns the information as an XML document). There's no security on it for now, so I don't have to worry about passing in authentication headers.

This is my first time using JSONP, although I've used regular JSON plenty. Maybe there's a simpler option given that I can do it so easily through the browser.

Answer 1

Your server needs to return a valid JSONP response for this to work. JSONP is special in that it is just a JavaScript file. That's how it works cross-domain, because it just adds a <script> tag to your head.

JSONP is not JSON, nor is it XML. You say your URL returns the data as an XML document? That's incorrect. That's why it's not working.

JSONP should just be a function call, to the function passed in via callback= , with the data as the 1st parameter.

I don't know what language your server is, but in PHP it could look like this:

<?php
$data = array(
    'UnreadTasks' => 5,
    'UnreadNotices' => 8
);

header('Content-type: application/javascript');
echo $_GET['callback'] . '(' . json_encode($data) . ');';

Answer 2

Try using ajax like this:

$.ajax({

  url: "localhost:13742/api/notices/get",

  dataType: "jsonp",

  data: $("#__UserId").val(),

  success: function(data) {
    console.log("Number of unread tasks- " + data.UnreadTasks + ". Number of unread notices- " + data.UnreadNotices);
  },

  error: function(jxhr, status, err) {
    console.log("Error, status = " + status + ", err = " + err);
  }
});

Also did you make sure 'localhost:13742/api/notices/get' supports jsonp - http://en.wikipedia.org/wiki/JSONP

Answer 3

Turns out it was a client-side issue. Apparently the user id needed to be included in the URL. Seems the server was alright after all. Rather boring solution, but there we go.

Thanks to everyone that assisted.

$.ajax({
            url: "localhost:13742/api/Notices/" + $("#__UserId").val(),
            dataType: "jsonp",
            success: function (data) {
                console.log("Number of unread tasks- " + data.UnreadTasks + ". Number of unread notices- " + data.UnreadNotices);
            },
            error: function (jxhr, status, err) {
                console.log("Error, status = " + status + ", err = " + err);
            }
        });