Search code examples
javascriptajaxioyuigeocoding

Google Geocoding ajax request with Yahoo YUI 3

I understand the way to make an ajax call in YUI 3 is using the IO utility. I want to get the address of a location from Google's geocoding API.

<script type="text/javascript"><!--
YUI().use('io-base', function(Y) {
    function complete(id, o) {
        var data = o.responseText; // Response data.
        alert(o.responseText);
    };

    Y.on('io:complete', complete, Y);
    var request = Y.io("http://maps.googleapis.com/maps/api/geocode/json?language=en&sensor=false&latlng=12,34);
});
//-->
</script>

I get a reply with method OPTIONS and status code 405 Method Not Allowed. I believe this is because of some "preflight" permission check. I do not receive the desired response. If I copy and paste the url into the browser, I see the json data.

I could post the ajax request to a php script on my own domain and get the json response with curl. But why have this extra step if I could just get the data in javascript?

So what can I do to solve this? Is the IO utility not the right library to use?

Solution

  • You're making a cross-domain XHR request, and running into the "Same origin policy", a generic restriction in client-side JavaScript. See for example Why do I still receive 405 errors even though both URLs are from XXXX.com?

    There are various ways to work around this problem:

    1) Make a server-side request in PHP, as you suggest 2) Use the YUI jsonp module 3) Use the YUI YQL module, which proxies your request through Yahoo! servers and handles JSONP housekeeping for you

    There are many other ways to tackle this problem, but those three should get you started.