JQuery.ajax () is crashing

Question

I am trying to make a jQuery .ajax() call on a public web service and I am unable to find the correct syntax.

I tried several different implementations. It:

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

The following error failed:

 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!'); } }); 

Cannot execute 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 serve the page through my local IIS7 instance. I also tried various combinations of $.getJSON() with similar results. What am I missing?

Here is the JSFiddle of the specified code.

UPDATE: We thought we had a solution, but I still get a callback is not defined error when making JSONP calls, even though the warning / log code is being called. The response URL is as follows:

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

and the JSON response is wrapped as follows:

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

I found examples with a callback name appended to the end of the URL in the .ajax() configuration, but when I try to get the same result, it is only bound to the end of the query string.

Answer 1

This regular JSON call will not work due to the same origin policy . This is evidenced by your mistake: 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

Proper use is buried in the documentation for $. ajax () . Find the jsonpCallback parameter.

 $.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 download 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 download http://www.geognos.com/api/en/countries/info/all.json for you.

In the JSONP section, your syntax is invalid. See http://api.jquery.com/jQuery.ajax/ for more details.

Answer 4

If you need to make a web service call to a domain that does not have the same origin (base URL), you need to use a proxy server for this. proxies are not required for the same domain restrictions.

They vary depending on the platform you are working with, such as .NET / LAMP.

There are several posts on this website on how to create them.

Answer 5

Here is an example of how you can fix this. By installing 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); });