Главная страница / Занятия / #17 / Создание асинхронного AJAX-запроса методом GET

Создание асинхронного AJAX-запроса методом GET

Задание:

Продемонстрировать, как осуществляется асинхронный AJAX-запрос методом GET.

html-документ (index.html):

   <!DOCTYPE html>
   
   <html lang="ru">
   
    <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Асинхронный AJAX-запрос методом GET</title>
     <script src="scripts.js"></script>
    </head>
   
    <body>
     <div></div>
     <button>Получить курс доллара США с&nbsp;сайта ЦБ&nbsp;РФ</button>
    </body>
   
   </html>

JS–скрипты (scripts.js):

   var xhr = new XMLHttpRequest();
      
   window.onload = function()
   {
    document.body.children[0].innerHTML = '<br><br>';
    document.body.children[1].onclick = function()
    {
     xhr.open("GET", "scripts.php", true);
     xhr.responseType = 'text';
     xhr.send();
    };
   };
   
   xhr.onload = function()
   {
    document.body.children[0].innerHTML = xhr.response;
   };

PHP–скрипты (scripts.php):

   <?
    header('Content-Type: text/html; charset=utf-8');
    $cbrLink = 'http://www.cbr.ru/scripts/XML_daily.asp?date_req='.date("d/m/Y");;
    $xmlContent = simplexml_load_file($cbrLink);
    foreach($xmlContent as $Valute)
    {
     if($Valute->CharCode == 'USD')
     {
      echo 'Курс доллара США на '.$xmlContent['Date'].' по&nbsp;данным ЦБ&nbsp;РФ: '.$Valute->Value.'<br><br>';
     }
    }
   ?>

Результат:

Результат выполнения задания можно посмотреть здесь.