如何简化如何在javascript中获得汇率？(How to simplify how to get exchange

如何简化如何在javascript中获得汇率？(How to simplify how to get exchange-rates in javascript?)

我在javascript中编写了两个互补函数来获取汇率（基于此处的代码），但我无法理解为什么它不能只在一个函数中。 这是代码谁工作：

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

代码是源代码的修改，我理解代码而不是行document.body.appendChild(script); 。

但我的问题是：为什么我要做两个分离函数（ sendRate和sendRate ）？ 我尝试了很多东西但是这样的东西不起作用：

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

有人可以解释一下为什么代码的第二部分不起作用以及它是否可以修复？

谢谢！

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!

最满意答案

这称为JSONP。 来自Javascript的“安全”，跨域通信需要此设置。

你正在做的是在页面上放置一个<script>标签。 标签有一个src属性，您提供的查询字符串（ ?字符后面的所有内容）。 只要您使用appendChild ，浏览器就会发出请求从该URL获取脚本。

该服务器接收请求，处理您的查询字符串，并返回内容。 内容采用以下格式：

sendRate({ rate: "whatever" });

这是一个函数调用。 这是因为您在查询字符串中将callback指定为“sendRate”。 此转换服务使用该值并使用它。

所以它期望在你的脚本中有一个名为sendRate的函数，并且应该有一个参数。

您无法组合您的功能，因为您不知道何时处理请求脚本。 这是附加脚本的异步行为。 一旦它准备就绪，它的脚本将执行并调用我上面指定的函数。

这是必需的，因为这是您与跨域服务器通信的唯一方式，反之亦然。 浏览器唯一可以接受跨域的是Javascript代码。 这就像你想从jQuery的网站或谷歌的CDN在你的页面上包含一个Javascript文件一样。 你会用：

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

除此之外，重点是向您的浏览器提供库。 从技术上讲，它做同样的事情 - 它只是执行Javascript代码。 在这种情况下，它只更改window ，而不是调用函数。 那里的内容恰好是静态的。

使用JSONP时，您指定“回调”并将其他查询字符串值传递给它，它允许您准确个性化应处理的内容，然后返回专门为您的环境设计的函数调用。

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.