Автор: Khilinski 2024-09-26

Парсинг xml документа

Для извлечения данные из XML файла и вставки их в HTML элемент, можно использовать JavaScript для парсинга XML данных и работы с DOM. А для этого нужно будет написать php для получения и обработки курса валют на стороне PHP, решая проблему CORS и передавая данные для дальнейшего использования.


// URL с курсами валют
$url = 'https://nbt.tj/ru/kurs/rss.php'; // В этой строке указывается URL, откуда нужно получить данные. Это RSS-лента с курсами валют.

// Получаем данные с удаленного сервера
$xmlData = file_get_contents($url); // Используем функцию file_get_contents() для получения содержимого указанного URL. Данные записываются в переменную $xmlData.

// Проверяем, удалось ли получить данные
if ($xmlData === false) {
    die('Ошибка получения данных с сервера.');
}
// Скрипт проверяет, удалось ли получить данные. Если нет, выводится сообщение об ошибке, и выполнение скрипта прекращается с помощью die()

// Устанавливаем заголовки для разрешения CORS
header('Access-Control-Allow-Origin: *'); //разрешает доступ к этому ресурсу с любого домена, что решает проблемы с CORS (междоменным доступом)
header('Content-Type: application/xml'); //указывает, что возвращаемый контент — это XML

// Выводим данные, полученные с сервера
echo $xmlData;

        

Чтобы обработать и вывести все в нужные места напишим JS


<div id="k_usd">3.60</div> <!-- Блок для отображения курса доллара США. -->
<div id="k_euro">3.60</div> <!-- Блок для отображения курса Евро. -->
<div id="k_rub">3.60</div> <!-- Блок для отображения курса Руб. -->

JavaScript для получения данных


async function fetchCurrencyRates() {
    try {
        const response = await fetch('https://ваш_домен/fetch_currency.php'); // Асинхронный запрос к вашему серверу для получения данных с помощью fetch().

        // Проверка на успешный ответ от сервера. Если запрос не удался, генерируется ошибка с кодом статуса
        if (!response.ok) {
            throw new Error(`Ошибка HTTP: ${response.status}`);
        }

        const xmlText = await response.text(); // Получаем ответ в виде текста (XML).
        console.log("XML Response:", xmlText); // Выводим ответ для проверки в консоль браузера.
        
        // Парсинг XML
        const parser = new DOMParser(); // Создаем объект DOMParser для преобразования строки XML в структуру DOM.
        const xmlDoc = parser.parseFromString(xmlText, "application/xml"); // Преобразуем XML-данные в объект xmlDoc, который можно использовать для работы с элементами XML.

        // Проверяем, произошла ли ошибка при парсинге XML
        if (xmlDoc.querySelector("parsererror")) {
            throw new Error("Ошибка при парсинге XML");
        }

        // Получение данных из XML<item>
        const items = xmlDoc.getElementsByTagName('item'); // Получаем все элементы <item> из XML.

        // Создаем объект для хранения курсов валют (доллар, евро, рубль).
        let rates = {
            'USD': null,
            'EUR': null,
            'RUB': null
        };

        // Обрабатываем каждый элемент <item>
        for (let item of items) {
            const title = item.getElementsByTagName('title')[0].textContent; // Получаем текст из тега <title> каждого элемента.
            
            // Проверяем, содержит ли текст элемент доллар США (код валюты: 840).
            if (title.includes("CURRENCY CODE: 840")) {
                const match = title.match(/NAME: (.*?) \\|.*?RATE: (.*)$/); // Используем регулярное выражение для извлечения названия валюты и курса.
                if (match) {
                    rates.USD = match[2];
                }
            }

            // Ищем евро (CURRENCY CODE: 978)
            if (title.includes("CURRENCY CODE: 978")) {
                const match = title.match(/NAME: (.*?) \\|.*?RATE: (.*)$/);
                if (match) {
                    rates.EUR = match[2]; // Сохраняем курс доллара в объект rates.
                }
            }

            // Ищем российский рубль (CURRENCY CODE: 810)
            if (title.includes("CURRENCY CODE: 810")) {
                const match = title.match(/NAME: (.*?) \\|.*?RATE: (.*)$/);
                if (match) {
                    rates.RUB = match[2];
                }
            }
        }

        // Обновляем HTML с курсами валют
        if (rates.USD) document.getElementById('k_usd').textContent = rates.USD;
        if (rates.EUR) document.getElementById('k_euro').textContent = rates.EUR;
        if (rates.RUB) document.getElementById('k_rub').textContent = rates.RUB;

    } catch (error) {
        console.error('Ошибка при получении данных:', error); // Если возникла ошибка (например, не удалось получить данные или произошло что-то другое), она будет перехвачена.
        document.getElementById('k_usd').textContent = 'Ошибка загрузки'; // Если ошибка возникла, выводим сообщение "Ошибка загрузки" вместо курса.
        document.getElementById('k_euro').textContent = 'Ошибка загрузки';
        document.getElementById('k_rub').textContent = 'Ошибка загрузки';
    }
}

// Вызываем функцию для получения курсов
fetchCurrencyRates();