How to simplify how to get exchange-rates in javascript?

Question

I've written two complementary functions in javascript to get exchange-rates (based on the code found here) but I can't understand why it can't be only in one function. This is the code who works :

var money;
function showRate() {
    getRate('EUR','USD');
    alert(money);
}
function getRate(from, to) {
    var script = document.createElement('script');
    script.setAttribute('src', "http://rate-exchange.appspot.com/currency?from="+from+"&to="+to+"&format=json&callback=sendRate");
    document.body.appendChild(script);
}

function sendRate(data) {
    money = parseFloat(data.rate, 10);
}

The code is a modification of the source, I've understand the code but not the line document.body.appendChild(script);.

But my question is : why I've to do two separates functions (getRate and sendRate)? I've tried many things but something like that doesn't work :

function showRate() {
    alert(getAndSendRate('EUR','USD'));
}
function getAndSendRate(from, to) {
    var script = document.createElement('script');
    script.setAttribute('src', "http://rate-exchange.appspot.com/currency?from="+from+"&to="+to+"&format=json");
    return(parseFloat(document.body.appendChild(script).data.rate, 10));
}

Could someone explain me why the second part of code doesn't work and if it can be fixed ?

Thanks!

Answer 1

This is called JSONP. This setup is required for "secure", cross-domain communication from Javascript.

What you are doing is putting a <script> tag on the page. The tag has a src attribute, that you are providing a query string with (everything after the ? character). As soon as you use appendChild, the browser makes a request get the script from that URL.

That server receives the request, processes your query string, and returns content. The content is in the following format:

sendRate({
    rate: "whatever"
});

Which is a function call. This is because you specified the callback in the query string as "sendRate". This conversion service took that value and used it.

So what it expects is that there will be a function in your script called sendRate, and should have one parameter.

You can't combine your functions because you don't know when the request script will be done processing. This is the asynchronous behavior of appending scripts. As soon as it's ready, its script will execute and call the function like I specified above.

This is all required because this is the only way for you to communicate with a cross-domain server and vice versa. The only thing that browsers can accept cross-domain is Javascript code. It's just the same as if you wanted to include a Javascript file on your page from jQuery's website or Google's CDN. You would use:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Except in that case, the point is to deliver a library to your browser. Technically, it does the same thing though - it simply executes Javascript code. In this case, it only changes window, instead of calling a function. And the content in there happens to be static.

While with JSONP, you specifying the "callback" and passing it other query string values, it allows you to personalize exactly what things should be processed, and then returns a function call that is designed specifically for your environment.