반응형
data.php 파일을 30초마다 동적으로 불러오려면 JavaScript와 AJAX를 활용할 수 있습니다.
이를 통해 페이지를 새로고침하지 않고도 데이터를 주기적으로 업데이트할 수 있습니다.
아래는 구현 예제입니다.
HTML과 JavaScript 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>동적 데이터 로드</title>
</head>
<body>
<div id="data-container">
<!-- data.php에서 불러온 데이터가 여기에 표시됩니다 -->
</div>
<script>
function fetchData() {
// AJAX 요청
const xhr = new XMLHttpRequest();
xhr.open("GET", "data.php", true);
xhr.onload = function () {
if (xhr.status === 200) {
// 성공적으로 데이터 수신
document.getElementById("data-container").innerHTML = xhr.responseText;
} else {
console.error("데이터를 불러오는 데 실패했습니다.");
}
};
xhr.onerror = function () {
console.error("AJAX 요청 중 오류가 발생했습니다.");
};
xhr.send();
}
// 30초마다 fetchData 호출
setInterval(fetchData, 30000);
// 페이지 로드 시 첫 번째 호출
fetchData();
</script>
</body>
</html>2. 작동 방식
- fetchData() 함수:
- mem_new_on.php 파일에 GET 요청을 보냅니다.
- 요청 성공 시 응답 데이터를 #data-container에 표시합니다.
- setInterval(fetchData, 30000):
- 30초(30,000밀리초)마다 fetchData()를 호출하여 데이터를 동적으로 업데이트합니다.
- 페이지 로드 시 초기 데이터 로드:
- fetchData()를 페이지 로드 시 한 번 실행하여 초기 데이터를 표시합니다.
JSON 형식으로 반환하는 것이 더 효율적일 수 있습니다. 클라이언트에서 데이터를 더 쉽게 처리할 수 있습니다.
JSON 형식으로 데이터를 반환하고 이를 클라이언트에서 처리하는 전체 코드를 자세히 작성해 보겠습니다.
1. 서버 측 파일 (PHP: data.php)
mem_new_on.php는 데이터를 JSON 형식으로 반환해야 합니다.
<?php
// 헤더 설정 (JSON 형식 반환)
header('Content-Type: application/json; charset=utf-8');
// 예제 데이터 배열
$data = [
'status' => 'success',
'timestamp' => date('Y-m-d H:i:s'),
'new_members' => [
['id' => 1, 'name' => '홍길동', 'join_date' => '2024-12-01'],
['id' => 2, 'name' => '김영희', 'join_date' => '2024-12-02'],
['id' => 3, 'name' => '이철수', 'join_date' => '2024-12-03']
]
];
// JSON 형식으로 데이터 반환
echo json_encode($data, JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT);
?>2. 클라이언트 측 파일 (HTML + JavaScript)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JSON 동적 데이터 로드</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
}
#data-container {
margin: 20px 0;
padding: 10px;
border: 1px solid #ddd;
background-color: #f9f9f9;
}
</style>
</head>
<body>
<h1>회원 정보</h1>
<div id="data-container">
<!-- 데이터를 여기에 출력합니다 -->
<p>데이터를 불러오는 중...</p>
</div>
<script>
function fetchData() {
// AJAX 요청 생성
const xhr = new XMLHttpRequest();
xhr.open("GET", "data.php", true);
xhr.onload = function () {
if (xhr.status === 200) {
try {
// JSON 데이터 파싱
const response = JSON.parse(xhr.responseText);
if (response.status === "success") {
// 데이터 렌더링
renderData(response);
} else {
document.getElementById("data-container").innerHTML =
"<p>데이터를 불러오는 데 실패했습니다.</p>";
}
} catch (error) {
console.error("JSON 파싱 오류:", error);
}
} else {
console.error("HTTP 오류:", xhr.status);
}
};
xhr.onerror = function () {
console.error("AJAX 요청 중 오류 발생");
};
xhr.send(); // 요청 전송
}
function renderData(data) {
const container = document.getElementById("data-container");
// 현재 시간 표시
let html = `<p>업데이트 시간: ${data.timestamp}</p>`;
// 회원 리스트 표시
html += "<ul>";
data.new_members.forEach(member => {
html += `<li>ID: ${member.id}, 이름: ${member.name}, 가입일: ${member.join_date}</li>`;
});
html += "</ul>";
container.innerHTML = html;
}
// 30초마다 데이터 불러오기
setInterval(fetchData, 30000);
// 페이지 로드 시 데이터 첫 로드
fetchData();
</script>
</body>
</html>동작 방식
서버 측 (data.php):
- JSON 형식으로 데이터를 클라이언트에 반환합니다.
- 예제에서는 회원 ID, 이름, 가입일 등의 데이터를 포함했습니다.
클라이언트 측:
- AJAX 요청:
- XMLHttpRequest 객체로 서버에서 데이터를 가져옵니다.
- JSON 데이터 파싱:
- JSON.parse()로 서버에서 응답받은 JSON 데이터를 JavaScript 객체로 변환합니다.
- HTML 업데이트:
- JSON 데이터를 기반으로 동적으로 HTML 콘텐츠를 업데이트합니다.
- 자동 업데이트:
- setInterval(fetchData, 30000)를 사용해 30초마다 데이터를 갱신합니다.
출력 결과 (예제 데이터) 초기 로드 시
업데이트 시간: 2024-12-07 12:30:45
- ID: 1, 이름: 홍길동, 가입일: 2024-12-01
- ID: 2, 이름: 김영희, 가입일: 2024-12-02
- ID: 3, 이름: 이철수, 가입일: 2024-12-03이 코드로 클라이언트와 서버 간에 JSON 데이터를 주고받으며 동적 업데이트를 구현할 수 있습니다.
필요에 따라 서버 응답 데이터를 확장하거나 클라이언트 렌더링 방식을 개선할 수 있습니다. 😊
반응형
'PHP∵SCRIPT' 카테고리의 다른 글
| 입력 필드에서 특정단어(예:#err)가 포함되었을 때 실시간 감지 및 경고창 띄우기 (0) | 2025.02.11 |
|---|---|
| SQL 인젝션(SQL Injection) 방지 "바인딩 변수" (0) | 2025.01.29 |
| 코딩할때 유용한 php 정규표현식 (1) | 2024.11.27 |
| PHP 5.2 이하에서 JSON 사용하기 (2) | 2024.11.26 |
| 자바스크립트 로 원격지 이미지 가로세로 사이즈 출력 (1) | 2024.11.24 |
| 알아두면 편리한 MySQL 쿼리문 (1) | 2024.11.16 |
| MySQL 및 JavaScript를 사용한 PHP 채팅 웹 애플리케이션 (0) | 2024.11.13 |
| PHP를 사용하여 올해 남은 일수를 계산하고 표시하는 간단한 코드 (0) | 2024.11.11 |
댓글