JSON Feed Appears to be XHR when it should be JS

I don't get why it'd doing this with the 2nd feed (appearing as a XHR call rather than just JS [looking at it in Firefox/Firebug]). The 2nd feed has the exact same MIME type as Flickr's JSON feed, yet the PortlandOregon.gov one shows as XHR and i get a NULL callback when using $.getJSON and if i use $.ajax with a 'json' or 'jsonp' type i get nothing at all. If i do the Flickr one i get the normal "[object Object]" callback.

Whats going on? Please help! This has been such a headache 开发者_如何学JAVAfor about a week. And i have authorization to change the feed, but i have to request the change, so if anyone knows for absolute sure let me know that!

Response Headers from Flickr's API ( http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=? ) [JS]:

Date    Mon, 15 Mar 2010 21:56:06 GMT
P3P policyref="http://p3p.yahoo.com/w3c/p3p.xml", CP="CAO DSP COR CUR ADM DEV TAI PSA PSD IVAi IVDi CONi TELo OTPi OUR DELi SAMi OTRi UNRi PUBi IND PHY ONL UNI PUR FIN COM NAV INT DEM CNT STA POL HEA PRE GOV"
Expires Mon, 26 Jul 1997 05:00:00 GMT
Last-Modified   Mon, 15 Mar 2010 21:52:17 GMT
Cache-Control   no-store, no-cache, must-revalidate, post-check=0, pre-check=0
Pragma  no-cache
Vary    Accept-Encoding
Content-Encoding    gzip
Content-Length  3647
Connection  close
Content-Type    application/x-javascript; charset=utf-8
Request Headers
Host    api.flickr.com
User-Agent  Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.2) Gecko/20100115 Firefox/3.6
Accept  */*
Accept-Language en-us,en;q=0.5
Accept-Encoding gzip,deflate
Accept-Charset  ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive  115
Connection  keep-alive
Referer http://oscargodson.com/dev/addWidget/test.html
Cookie  BX=4lflj455amesp&b=3&s=iv; fltoto=0%2C0%2C0%2C0%2C1%2C0%3B0%2C0%2C0%2C0%2C0%2C0%2C0%2C0%2C0%2C0%2C0%2C0%2C0%3B1%3B0%3B; search_z=t; localization=en-us%3Bus%3Bus

---

PortlandOregon.gov ( http://www.portlandonline.com/shared/cfm/json.cfm?c=27321 ) [XHR]:

Response Headers
Connection  close
Date    Mon, 15 Mar 2010 21:57:49 GMT
Server  Microsoft-IIS/6.0
Set-Cookie  CONTACT_ID=0;path=/ LAST_USER=;path=/ BIGipServercgis_pol_web_pool-http=1191537418.20480.0000; path=/
Content-Type    application/x-javascript; charset=utf-8
Request Headers
Host    www.portlandonline.com
User-Agent  Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.2) Gecko/20100115 Firefox/3.6
Accept  application/json, text/javascript, */*
Accept-Language en-us,en;q=0.5
Accept-Encoding gzip,deflate
Accept-Charset  ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive  115
Connection  keep-alive
Referer http://oscargodson.com/dev/addWidget/test.html
Origin  http://oscargodson.com

---

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