jQuery .ajax（）调用失败

Question

I'm trying to make a jQuery .ajax() call to a public web service, and I'm having trouble finding the right syntax.

I've tried several different implementations. This one:

$.ajax({
  url: 'http://www.geognos.com/api/en/countries/info/all.jsonp',
  dataType: "jsonp",
  success: function() {
    alert('JSONP call succeeded!');
  }
});

It fails with the following error:

all.jsonp:1 Uncaught ReferenceError: callback is not defined

And this one:

$.ajax({
  url: 'http://www.geognos.com/api/en/countries/info/all.json',
  dataType: "json",
  success: function() {
    alert('JSON call succeeded!');
  }
});

Fails with this error:

XMLHttpRequest cannot load http://www.geognos.com/api/en/countries/info/all.json. Origin http://localhost:8888 is not allowed by Access-Control-Allow-Origin.

I'm serving the page through my local IIS7 instance. I've also tried various combinations of $.getJSON() with similar results. What am I missing?

Here's a JSFiddle of the above code.

UPDATE: Thought we had a solution, but I'm still getting the callback is not defined error when doing the JSONP calls, even though the alert/log code gets called. The response URL looks like this:

http://www.geognos.com/api/en/countries/info/all.jsonp?callback=undefined&157148585

and the JSON response is wrapped like this:

callback({"StatusMsg": "OK", "Results": {"BD": {"Name": "Bangladesh", "Capital": {"DLST": "null", "TD": 6.0, "Flg": 2, "Name": "Dhaka", ...

I've found examples with the callback name added on to the end of the URL in the .ajax() configuration, but when I try that I get the same result, only it's tacked on to the end of my query string.

Answer 1

This regular JSON call will not work because of same origin policy . This is what your error is telling you with: is not allowed by Access-Control-Allow-Origin .

The correct JSONP syntax is:

$.ajax({
    url: 'http://www.geognos.com/api/en/countries/info/all.jsonp',
    dataType: "jsonp",
    jsonpCallback: 'callback',
    success: function(data) {
        console.log(data);
    }
});

DEMO

Answer 2

The correct usage is buried in the documentation for $.ajax() . Search for the jsonpCallback option.

$.ajax({
  url: 'http://www.geognos.com/api/en/countries/info/all.jsonp',
  dataType: "jsonp",
  jsonpCallback: function() {
    alert('JSONP call succeeded!');
  }
});

Fiddle: http://jsfiddle.net/gya3b/3/

Answer 3

You can make it work if you create a proxy to load the url for you.

$.ajax({
    url: 'proxy.php?url=http://www.geognos.com/api/en/countries/info/all.json',
    dataType: "json",
    success: function() {
        alert('JSON call succeeded!');
    }
});

Here proxy.php will load http://www.geognos.com/api/en/countries/info/all.json for you.

About the JSONP part, your syntax is invalid. See http://api.jquery.com/jQuery.ajax/ for more.

Answer 4

Here is an example of how you can fix this. By setting your jsoncallback.

$.ajax(url, { dataType: 'jsonp', jsonp: 'jsoncallback' })
    .then(function(data, status, xhr) {
        console.log(status);
        console.log('success (promises): ' + data.name);
}, function(xhr, status, error) {
    console.log('failed (promises): ' + error);
});

Answer 5

If you need to make a web service call to a domain that is not of the same origin (ie base URL) you need to use a proxy to do so. proxies are not necessarily obligated to the same domain restrictions.

They are different depending on the platform you are working with, ie .NET/LAMP.

This website has multiple posts on how to create either.