var xhr = new XMLHttpRequest();
xhr.addEventListener('readystatechange', ajaxHandler);

function ajaxHandler() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        var personsChild = parsePersonsJSON(xhr.responseText);
        var persons = document.querySelector('#persons');
        persons.innerHTML = '';

        for (var i in personsChild) {
            persons.appendChild(personsChild[i]);
        }
    }
}

function parsePersonsJSON(jsonStr) {
    var persons = JSON.parse(jsonStr);

    for (var i in persons) {
        var content = '<h4>이름: ' + persons[i].name + '</h4>';
        content += '<h4>성별: ' + persons[i].gender + '</h4>';
        content += '<h4>나이: ' + persons[i].age + '</h4>';
        content += '<h4>분야: ' + persons[i].field + '</h4>';

        var div = document.createElement('div');
        div.setAttribute('class', 'person');
        div.innerHTML = content;

        persons[i] = div;
    }

    return persons;
}

function sendHandler() {
    xhr.open('GET', 'persons.json', true);
    xhr.send();
}

function clearHandler() {
    document.querySelector('#persons').innerHTML = '';
}

function init() {
    document.querySelector('#send').addEventListener('click', sendHandler);
    document.querySelector('#clear').addEventListener('click', clearHandler);
}

window.addEventListener('load', init);