// javascript
function refreshServerInfo() {
    const req = new XMLHttpRequest();
    req.addEventListener('load', function() {
        // TODO: 값을 HTML에 삽입하는 것은 나중에 합니다.
        console.log(this.responseText)
    });
    req.open('GET', 'http://localhost:7070', true);
    req.send();

    req.addEventListener('load', function () {
        // this.responseText는 JSON이 들어있는 문자열입니다.
        // JSON.parse를 써서 문자열을 객체로 바꿉니다.
        const data = JSON.parse(this.responseText);

        // 이 예제에서는 클래스가 serverInfo인 div 의 텍스트만 교체합니다.
        const serverInfo = document.querySelector('.serverInfo');

        // 서버에서 반환한 객체를 키 기준으로 순회합니다.
        Object.keys(data).forEach(p => {
            // 텍스트를 교체할 요소를 찾습니다.
            const replacements = serverInfo.querySelectorAll(`[data-replace="${p}"]`);
            // 서버에서 받은 값으로 텍스트를 교체합니다.
            for (let r of replacements) {
                r.textContent = data[p];
            }
        })
    })
}

// jQuery
function refreshServerInfo() {
    const $serverInfo = $('.serverInfo');
    $.get('http://localhost:7070').then(
        // 성공한 경우
        function(data) {
            Object.keys(data).forEach(p => {
                $(`[data-replace="${p}"]`).text(data[p]);
            })
        },
        function(jqXHR, textStatus, err) {
            console.error(err);
            $serverInfo.addClass('error')
                .html('Error connecting to server.');
        }
    )
}