0

我在 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);。

但我的问题是：为什么我要做两个单独的函数（getRate和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));
}

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

谢谢！

4

1 回答 1

0

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

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

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

sendRate({
    rate: "whatever"
});

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

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

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

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

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

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

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

于 2013-04-13T19:59:19.353 回答