Как упростить, как получить обменные курсы в javascript?

Question

Я написал две дополнительные функции в javascript для получения обменных курсов (на основе найденного кода here), но я не могу понять, почему это не может быть только в одной функции. Это код, который работает:

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

Может кто-нибудь объяснить мне, почему вторая часть кода не работает, и если она может быть исправлена?

Спасибо!

Answer 1

Это называется JSONP. Эта настройка необходима для «безопасной», междоменной связи с Javascript.

Что вы делаете, это положить тег <script> на страницу. Тег имеет атрибут src, который вы предоставляете строку запроса (все после символа ?). Как только вы используете appendChild, браузер делает запрос, чтобы получить скрипт с этого URL-адреса.

Этот сервер получает запрос, обрабатывает вашу строку запроса и возвращает содержимое. Содержание находится в следующем формате:

sendRate({ 
    rate: "whatever" 
}); 

Это вызов функции. Это связано с тем, что вы указали callback в строке запроса как «sendRate». Эта служба преобразования приняла это значение и использовала его.

Так что он ожидает, что в вашем скрипте будет функция sendRate и должна иметь один параметр.

Вы не можете комбинировать свои функции, потому что вы не знаете, когда будет выполняться обработка сценария запроса. Это асинхронное поведение добавляемых скриптов. Как только он будет готов, его скрипт выполнит и вызовет функцию, как указано выше.

Это все необходимо, потому что это единственный способ связаться с междоменным сервером и наоборот. Единственное, что браузеры могут принимать кросс-домен, это код Javascript. Это точно так же, как если бы вы хотели включить Javascript-файл на свою страницу с сайта jQuery или CDN от Google. Вы бы использовали:

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

За исключением случаев, когда необходимо доставить библиотеку в ваш браузер. Технически, он делает то же самое, хотя - он просто выполняет Javascript-код. В этом случае он меняет только window вместо вызова функции. И контент там бывает статичным.

В то время как с JSONP вы указываете «обратный вызов» и передаете ему другие значения строки запроса, это позволяет персонализировать именно то, что нужно обрабатывать, а затем возвращает вызов функции, специально разработанный для вашей среды.