Question

If I paste the following URL in a browser tab:

https://maps.googleapis.com/maps/api/place/search/json?location=51.5237587%2C-0.1583642&radius=500&types=bar&key=MY_KEY_HERE&sensor=false

… I get the expected JSON response from the Google Places API (MY_KEY_HERE is of course replaced with the actual key, here and in the .ajax() below). However when using this jQuery.ajax() construct:

$.ajax({
     type: 'GET',
     url: "https://maps.googleapis.com/maps/api/place/search/json",
     data: {"location" : latlng, "radius" : 500, "types" : "bar", "key" : "MY_KEY_HERE", "sensor" : "false",},
     dataType: "json",
     success: function(data)
     {
       var pubResults = data; 
     },
     error: function(data)
     {
       alert(JSON.stringify(data));
     },
     complete: function(data)
     {
       initialize($.oneapi.latitude, $.oneapi.longitude, pubResults);
     }
   }); 

…then the success block is not reached, instead the error block outputs:

{"readyState":0,"responseText":"","status":0,"statusText":"error"}

Testing in Firefox 5.01. The Web console confirms that .ajax() is GETting the URL mentioned at the top of this question. Any ideas why the jQuery call to that URL would result in the error, but the same URL pasted into a browser tab results in the expected JSON?

Many thanks for your time!

Answer 1

This is a cross domain request. Browsers by default block responses from cross domain sites. You need to use jsonp as the datatyoe. Just google the same and you can see how it can be done using the jquery API. Stack overflow has questions around these too.

Under the same origin policy, a web page served from server1.example.com cannot normally connect to or communicate with a server other than server1.example.com. An exception is the HTML element. Taking advantage of the open policy for elements, some pages use them to retrieve Javascript code that operates on dynamically-generated JSON-formatted data from other origins. This usage pattern is known as JSONP.