0

為替レートを取得するために JavaScript で 2 つの補完的な関数を作成しました (ここにあるコードに基づいています) が、なぜ 1 つの関数だけにできないのか理解できません。これは動作するコードです:

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

しかし、私の質問は、なぜ 2 つの別個の関数 (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));
}

コードの 2 番目の部分が機能しない理由と、修正できるかどうかを説明してもらえますか?

ありがとう！

4

1 に答える 1

0

これは JSONP と呼ばれます。この設定は、Javascript からの「安全な」クロスドメイン通信に必要です。

あなたがしていることは<script>、ページにタグを付けることです。タグにはsrc、クエリ文字列に指定する属性があります (文字の後のすべて?)。を使用するとすぐappendChildに、ブラウザはその URL からスクリプトを取得するよう要求します。

そのサーバーはリクエストを受け取り、クエリ文字列を処理して、コンテンツを返します。内容は次の形式です。

sendRate({
    rate: "whatever"
});

これは関数呼び出しです。これはcallback、クエリ文字列で「sendRate」を指定したためです。この変換サービスは、その値を取得して使用しました。

したがって、スクリプトには という関数があり、sendRate1 つのパラメーターを持つ必要があると想定されます。

リクエストスクリプトの処理がいつ完了するかわからないため、関数を組み合わせることができません。これは、追加スクリプトの非同期動作です。準備が整うとすぐに、そのスクリプトが実行され、上で指定したように関数が呼び出されます。

これは、クロスドメイン サーバーと通信する唯一の方法であり、その逆も同様であるため、すべて必要です。ブラウザーがクロスドメインを受け入れることができるのは、Javascript コードだけです。これは、jQuery の Web サイトまたは 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 に答える