자바스크립트 새로고침 DIV

페이지 전체를 이동하지 않고 div 하나를 갱신하려면, 안정적인 대상 요소에 새 마크업을 불러오면 됩니다. jQuery의 .load()는 현재 페이지를 요청한 뒤 응답에서 해당 대상만 선택할 수 있습니다. 별도의 방법으로 window.setInterval()을 사용하면 일정한 간격으로 대상의 내용을 바꿀 수 있습니다. 타이머는 작업을 예약할 뿐, 그 자체로 콘텐츠를 가져오거나 새로 고치지는 않습니다.

아래 HTML 예제는 브라우저 페이지용 소스이며 여기서 실행하지 않았습니다. 예제는 CDN에서 jQuery 3.6.0을 불러오므로 해당 라이브러리를 로드하려면 페이지에 네트워크 연결이 필요합니다. 독립 실행형 JavaScript 메시지 선택 예제는 실행했으며, 표시된 Data received 출력을 냈습니다. 이 예제는 브라우저 DOM에 접근하거나 타이머를 기다리지 않습니다. 출력의 Data received 레이블은 코드와 출력 블록의 바이트 동일성을 유지하기 위해 영어로 남아 있습니다.

현재 페이지에서 jQuery .load()로 div 다시 불러오기

콘텐츠 컨테이너에 id를 지정한 다음 해당 요소에서 .load()를 호출합니다. 첫 번째 인수는 현재 페이지 URL인 window.location.href에 공백과 선택자 #here를 결합한 값입니다. jQuery는 해당 URL을 요청하고 응답에서 일치하는 요소를 추출해 기존 대상 요소 안에 그 내용을 넣습니다. 이렇게 하면 페이지 전체를 바꾸지 않고 선택한 부분만 갱신합니다. 원본 페이지가 대상 요소를 반환해야 하며, 페이지의 출처와 서버 설정이 요청을 허용해야 합니다.

jQuery 스크립트를 포함한 브라우저 페이지에서 이 예제를 실행하세요.

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<div id="here">This content is loaded again from the current page.</div>
<script>
  $(function () {
    $("#here").load(window.location.href + " #here");
  });
</script>

URL과 선택자를 결합하는 형식은 jQuery의 .load() 메서드에서 사용하는 방식입니다. jQuery가 선택자를 요청 URL과 구분할 수 있도록 선택자 앞에 공백을 두세요. 페이지 URL에 프래그먼트가 있어도 브라우저는 이를 HTTP 요청에 포함해 전송하지 않습니다.

선택자로 div의 자식 요소만 불러오기

URL 뒤에 선택자를 추가하면 응답에서 가져올 내용을 더 좁힐 수 있습니다. " #here > *"에서 맨 앞의 공백은 선택자와 URL을 구분하고, #here는 원본 컨테이너를 찾으며, >는 그 컨테이너의 직계 자식 요소를 선택합니다. 대상 div 자체는 삽입할 콘텐츠로 선택되지 않습니다. 원본 컨테이너가 래퍼이고 대상 요소는 그대로 둔 채 그 자식만 교체하려면 이 형식을 사용하세요.

이 페이지에서는 마크업과 선택자에 동일한 리터럴 here ID를 사용합니다.

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<div id="here"><p>First item</p><p>Second item</p></div>
<script>
  $(function () {
    $("#here").load(window.location.href + " #here > *");
  });
</script>

선택자 #here > *는 직계 자식 요소를 포함하지만 컨테이너 바로 안에 있는 텍스트 노드는 포함하지 않습니다. 모든 하위 항목이 필요하다면 하위 요소 선택자를 의도에 맞게 고르고, 그 선택자가 어떤 마크업을 반환하는지 고려하세요.

window.setInterval()로 타이머에 따라 div 업데이트하기

정해진 간격으로 콘텐츠를 반복해서 바꾸려면 window.setInterval()을 사용하세요. 지연 시간의 단위는 밀리초입니다. 6000ms로 설정하면 브라우저가 약 6초마다 콜백을 실행하도록 예약합니다. 페이지가 바쁘면 콜백 실행이 늦어질 수 있습니다. 콜백에서 div의 textContent에 새 메시지를 넣는 것처럼 실제 업데이트를 수행해야 합니다. 정해진 횟수만큼 변경한 뒤나 컴포넌트가 제거될 때처럼 업데이트를 멈춰야 하는 시점에는 window.clearInterval()을 호출하세요.

다음 브라우저 페이지 소스는 메시지 두 개를 번갈아 표시한 뒤 모두 보여 주면 멈춥니다.

<div id="status">Waiting for an update</div>
<script>
  const messages = ["Data received", "Ready for the next request"];
  const status = document.getElementById("status");
  let index = 0;
  const timerId = window.setInterval(function () {
    status.textContent = messages[index];
    index += 1;
    if (index === messages.length) {
      window.clearInterval(timerId);
    }
  }, 6000);
</script>

같은 콘텐츠 순환을 보여 주는 실행 가능한 JavaScript 예제에서는 아래 코드가 각 메시지를 순서대로 선택합니다. 이 코드는 선택 로직을 보여 주며 브라우저 DOM에 접근하거나 타이머를 기다리지는 않습니다.

const messages = ["Data received", "Ready for the next request"];
let index = 0;

function nextMessage() {
  const message = messages[index];
  index += 1;
  return message;
}

console.log(nextMessage());

Data received

콜백이 textContent를 업데이트하기 때문에 타이머가 div의 내용을 바꿉니다. 다른 위치의 숫자만 바꾸는 카운트다운은 div의 메시지를 갱신하지 않습니다. 페이지의 용도에 맞춰 지연 시간과 중지 조건을 정하세요.