AJAX
페이지 정보
작성자 최고관리자 작성일 24-09-03 19:48 조회 65 댓글 0본문
<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>
<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>
The XMLHttpRequest Object
댓글목록 0
등록된 댓글이 없습니다.