Question

I’m trying to get a currency rate with the Google Currency Calculator using the following jquery (dummy) code:

    $.getJSON("http://www.google.com/ig/calculator?hl=en&q=1" + "DOP" + "=?" + "USD",
        function(data) {
            $('.currNumber').each(function (index) {
                $(this).html(parseFloat($(this).html()) * 0.02681);
                                  });
          });

XMLHttpRequest cannot load http://www.google.com/ig/calculator?hl=en&q=1DOP=?USD. Origin ‘hostURL’ is not allowed by Access-Control-Allow-Origin.

Looking in the site I’ve found various topics on the subject but they mostly refer to local file access and attempt to solve it by starting chrome with an additional parameter (I’m also using chrome) but such is not my issue, which actually seems more related to cross-domain restrictions.

So, question is: How can I use jQuery to get the rate from that url?

Answer 1

Ajax requests are limited by the browser’s Same Origin Policy. In a nutshell, that means that you can’t talk directly to a server via ajax that isn’t on the same domain as the page your script is running in. So, unless you’re developing a page for google.com, you can’t talk to google.com directly.

There are work-arounds for this limitation involving the insertion of script tags (JS files loaded via script tags are not subject to the same origin policy) and then using JSONP callbacks to communicate data results back to your main script from those script tags. That is probably what you need to do here if the API you’re attempting to use supports it.

jQuery will help you a lot here as it can automatically turn an ajax call into a JSONP call that is loaded via script tags and can work in cross domain situations. According to the jQuery doc for it’s ajax function, it will do this automatically if it sees “callback=” in the parameter string for the ajax call or if you set the crossDomain option.