AJAX > JAVASCRIPT ONLY

• 목록

<div id="demo">
    <h2>The XMLHttpRequest Object</h2>
    <button type="button" onclick="toggleContent()">Change Content</button>
    <div id="content" style="display: none;"></div> <!-- 내용이 표시될 영역 -->
</div>

<script>
function loadDoc(callback) {
    const xhttp = new XMLHttpRequest();
    xhttp.onload = function() {
        // 서버에서 받은 내용을 #content div에 삽입합니다.
        document.getElementById("content").innerHTML = this.responseText;
        if (callback) callback(); // 콜백이 제공되었으면 실행합니다.
    }
    xhttp.open("GET", "/zz/text/kims_video2.txt", true);
    xhttp.send();
}

function toggleContent() {
    const contentDiv = document.getElementById("content");
    if (contentDiv.style.display === "none") {
        if (!contentDiv.innerHTML) {
            // 콘텐츠가 로드되지 않은 경우, AJAX 요청을 보내고 데이터를 로드합니다.
            loadDoc(function() {
                contentDiv.style.display = "block"; // 데이터가 로드된 후 콘텐츠를 표시합니다.
            });
        } else {
            contentDiv.style.display = "block"; // 이미 데이터가 로드된 경우, 콘텐츠를 표시합니다.
        }
    } else {
        contentDiv.style.display = "none"; // 콘텐츠를 숨깁니다.
    }
}
</script>