JSON Feed Appears to be XHR when it should be JS

Answer 1

To enable others to make jsonp requests you need to check serverside if in the request url there is a callback parameter.

e.g.

/shared/cfm/json.cfm?callback=foo&c=27321

(note foo is just a sample it could be any kind of string, e.g. jQuery uses something like callback=jsonp1231313123)

If yes instead of this

( {"COLUMNS": ...... } )

then you need to return this (the value of the callback parameter has to be added in front of the respones)

foo( {"COLUMNS": ...... } )

Now you should be able to retrieve the answer either using

$.ajax and datatype: 'jsonp' or

$.getJson("http://www.port.../json.cfm?callback=?", {c:'27321'}, somefn)

---

How can I say this... Well the problems you have come from the fact that you didn't carefully read what I wrote. And (maybe?) didn't bother to read the passages in jQuery API documentation for $.ajax and $.getJSON where something about jsonp is written.

1. The data http://www.portlandonline.com/shared/cfm/json.cfm?c=27321&callback=test returns is still wrong (function and return keyword still present)

2. The data your url returns http://kneedeepincode.com/api/test/ is ok. Atleast in a sense (you don't respect the callback parameter and always return as if callback=test was set. But that's ok for testing. But introduces a subtle error which makes you think it doesn't work.

   • The reason you think even your test site doesn't work is that you are calling it wrong. (Skip to the end of the answer to see a script-snippet which loads your code just fine.

Let's see what I wrote above:

Either use:

$.ajax and datatype: 'jsonp' or use

$.getJson and append callback=? to the url (!NOT callback=test).

But on your testsite you append callback=test instead of callback=? to the url and are using $.getJSON. Which won't work as the documentation is very clear about what you have to do when you use $.getJSON and want to make a jsonp request really.

If the URL includes the string "callback=?" in the URL, the request is treated as JSONP instead. See the discussion of the jsonp data type in $.ajax() for more details.

As you set callback=test jQuery doesn't recognize that you wan't a jsonp request instead of a json request and thus fails to do what you expected it would do. And just treats sends the callback=test as if it was a normal get request parameter and not the jsonp callback.

If you use $.ajax and datatype: 'jsonp' jQuery will automagically append the callback=jsonp[somenumberhere] to the url.

If you want to use $.getJson the you yourself need to append callback=? to the url (but I repeat !NOT callback=test. jQuery will again handle replacing the ? with a value in the form jsonp[somenumberhere]).

Working code snippet for your test-site:

$(document).ready(function() {
    $.ajax({
        url          : "http://kneedeepincode.com/api/test/",
        dataType     : 'jsonp',
        //normally you wouldn't set the jsonpCallback parameter
        //here I need to do this because your test site acts as if callback=test was set
        jsonpCallback: 'test',
        success      : function(data) {
            $("body").empty();
                for(var i = 0; i < data.COLUMNS.length; i++) {
                $("body").append("<p>"+data.COLUMNS[i]+"</p>");
            }
        }
    });
});