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

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

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

<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... что, в принципе, и требовалось:

<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" />

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