Среда, 04 марта 2015 14:34

Снова про курс валют Центробанка, про cross-origin и джаваскрипты

Оцените материал
(5 голосов)

Продолжим разговор о том, как адекватно спарсить (сугубо технический термин без никакого криминального оттенка, не путать со словами "стащить" или, не приведи господи, "скоммуниздить") актуальные курсы валют Центробанка.

Winter St. Petersburg

В недавней статье Падение российского рубля на Google Chart сделана попытка показать код, позволяющий посредством php-скрипта, а также Google Chart вывести на страничку вашего блога - информер, отображающий динамику колебаний курсов валют ЦБ за любой обозримый промежуток времени... хм, а почему бы нам не попробовать вообще обойтись без php?

Поводов к тому немало - например, настройки безопасности вашего сервера. Либо - капризные скрипты техотдела ЦБ РФ, время от времени без всякой видимой причины ограничивающие доступ к своему собственному XML для того или иного ip. Да и... попросту интересно ведь; давайте попробуем выполнить код полностью "на клиенте", а не на сервере!

 

Dev banner 3

 

Сказано - сделано. Оттолкнуться попробуем от совсем простенького скрипта, содержащего, впрочем, уже и некоторые демо-данные:

 

<div id="test"></div>
<script>
var data = { "valute":[
{
"date":"04.03.2015",
"charcode":"USD",
"value": "61"
},
{
"date":"04.03.2015",
"charcode":"EUR",
"value": "68"
}
]}
var output="<ul>";
for (var i in data.valute) {
output+="<li>" + data.valute[i].date + " " + data.valute[i].charcode + " - " + data.valute[i].value +"</li>";
}
output+="</ul>";
document.getElementById("test").innerHTML=output;
</script>

 

Попробуйте. Все скрипты здесь (равно как и в других статьях блога) полностью рабочие, вы можете с ними вволю экспериментировать. Работает? - ок, поехали дальше.

Но - уехать удается недалеко. Демо-данные скрипт отрабатывает, а вот подставить на их место url не удается: мешает отсутствие Cross-Origin заголовка в ответе сервера... ну, про CORS и XSS-уязвимости прочитаете уже сами, Google в помощь. Одним словом, нету их в ответе сервера Центробанка, а это означает, что целесообразно прибегнуть к JSONProxy, либо к консоли YQL (также позволяющей получить не только XML, но и прямиком JSON).

В результате некоторых меланхоличных раздумий почти вплотную приближаемся к желаемому - на сей раз оно принимает у нас с вами вот такой вид:

 

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script type="text/javascript" src="https://rawgit.com/tdolsen/jquery-dump/master/jquery.dump.js"></script>
<script>
$(document).ready(
function(){
$.getJSON("https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20xml%20where%20url%3D'http%3A%2F%2Fwww.cbr.ru%2Fscripts%2FXML_daily.asp%3F'&format=json&diagnostics=true&callback=")
.done(
function(data){
console.log(data.query.results)
$("#test").html($.dump(data));
var output="<ul>";
for (var i in data.test) {
output+="<li>" + data.Record[i].Date + " " + data.Record[i].Nominal + "--" + data.Record[i].Value +"</li>";
}
output+="</ul>";

// $('#test').html(output);
}
)
.fail(
function(jqxhr, textStatus, error){
alert('Error happened: ' + textStatus + ", " + error);
}
);
}
);
</script>
<div id="test" />

 

Обратите внимание... для начала, здесь помимо непременного jquery.js , включен также и jquery.dump.js , который вовсе не является обязательным. Присмотритесь: цикл у нас с вами сейчас вообще не работает, до него дело попросту не доходит, да и вывод закомментирован; а в HTML идет дамп. Зато теперь мы с вами можем не спеша рассмотреть структуру и адекватно итерировать объекты JSON. Не поленитесь, откройте скрипт в браузере!

Также, как видите, мы включили обработку ошибок и console.log , что дополнительно предоставляет немалые возможности для отладки, понадобится лишь открыть консоль браузера... наконец, на выходе получаем всегда актуальные курсы валют на страничке своего сайта и вот этот код, не содержащий ни грамма php... что, в принципе, и требовалось:

 

Не стесняйтесь добавить или удалить тот или иной объект (CharCode, Nominal, ID): по аналогии с демкой это очень несложно.

 

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script>
$(document).ready(
function(){
$.getJSON("https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20xml%20where%20url%3D'http%3A%2F%2Fwww.cbr.ru%2Fscripts%2FXML_daily.asp%3F'&format=json&callback=")
.done(
function(data){
var output = '<ul>';
$(data.query.results.ValCurs.Valute).each(function(i, item){
output += '<li>' + item.Name + ' - ' + item.Value + '</li>';
}
);
output += '</ul>';
$('#test').append($(output));
}
)
}
);
</script>
<div id="test" />

 

Ок, демка - вверху страницы слева, обсуждение и скрипты - на форуме, а продолжение - как всегда, следует.

Последнее изменениеПонедельник, 15 августа 2022 02:45

Оставить комментарий

Добавьте ваш комментарий

Заказать сайт

Веб-разработка. Заказать сайт

Вы можете заказать сайт-визитку, блог, корпоративный сайт, интернет-магазин или коммерческий web-портал.