为什么这个jQuery Ajax请求失败？

Question

The FCC recently made available a small set of API calls to access FCC data . In particular, I'm interested in the Consumer Broadband Test API . I'm trying to access this API through jQuery but am failing. Please let me know if I'm doing something wrong with my code or if this seems to be a problem with FCC's API.

If you visit this API request in a browser, it returns a XML response just fine: http://data.fcc.gov/api/speedtest/find?latitude=30.240236062827297&longitude=-97.64787337499999

So I've tried to load this data in jQuery using various methods:

var url = "http://data.fcc.gov/api/speedtest/find?latitude=30.240236062827297&longitude=-97.64787337499999";

$.ajax({
    type: "GET",
    url: url,
    success: function(data) {
        console.log("ajax: " + data);
    }
});

$.getJSON(url, function(data) {
    console.log("getJSON: " + data);
});

$.get(url, function(data) {
    console.log("get: " + data);
});

In the Firebug console, all three requests show a 200 (OK) status, but the response body is empty. Also, the resulting console.log messages are:

ajax: 
getJSON: null
get: 

Am I doing something wrong here?

Answer 1

To work around the Same Origin Policy, you'll need to use JSONP. It is supported by the API. Add callback=? to the URL string in your .getJSON() call:

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.

So, something like this:

var url = "http://data.fcc.gov/api/speedtest/find?...&callback=?";
$.getJSON(url, function(data) {
  // do stuff
});

References: http://api.jquery.com/jQuery.getJSON/

Answer 2

You can't make cross-domain calls using AJAX. It doesn't work like that.

What you probably want to do is to have your AJAX query URL be a local script on your own server, then have that script run a request for the API url (using cURL or something).