AJAX로 JSON 데이터 불러와서 웹페이지 표기 25.02.21

박재정·2025년 2월 26일

학습정보

목록 보기

27/29

AJAX 아약스?
축구팀 아약스는 아는데 ?

하면 이렇게 맞으려나

AJAX

자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신기능
클라이언트와 서버간에 XML 데이터를 주고받는 기술이다

비동기 방식이란?

웹페이지를 리로드 하지 않고 데이터를 불러오는 방식
웹페이지에서 기타 코드들을 요청할 경우, 웹페이지를 리로드 하면서 불필요한 리소스가 낭비가 되는데, 비동기 방식을 이용하면 필요한 데이터만 불러오면서 리소스 낭비를 줄일 수 있다.
AJAX는 XMLHttpRequest객체를 통해 서버에 request한다.
JSON이나 XML형태로 필요한 데이터만 받아 갱신하기 때문에 그만큼의 자원과 시간을 아낄 수 있다.

AJAX의 장점

웹페이지 속도향상
서버의 처리가 완료될 때까지 기다리지 않고 처리 가능
기존 웹에서 불가능했던 UI를 가능하게 해줌

AJAX의 단점

페이지 이동이 없는 통신으로 보안상의 문제가 있을수 있음
연속으로 데이터 요청시 서버 부하가 증가
히스토리 관리가 안된다.
Script로 작성되서 디버깅이 용이하지 않음

1단계: HTML 구조만들기

기본 개념 이해
AJAX를 이용해 https://sample.bmaster.kro.kr/contacts?pageno=3&pagesize=10에서 데이터를 가져오고, 테이블 형태로 웹 페이지에 표시해야 합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact List</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid black;
            padding: 8px;
            text-align: center;
        }
        img {
            width: 80px;
            height: 80px;
            object-fit: cover;
        }
    </style>
</head>
<body>

    <h2>연락처 목록</h2>
    <table id="contactsTable">
        <thead>
            <tr>
                <th>번호</th>
                <th>이름</th>
                <th>전화번호</th>
                <th>주소</th>
                <th>사진</th>
                <th>삭제</th>
            </tr>
        </thead>
        <tbody>
            <!-- AJAX를 통해 데이터가 동적으로 추가될 부분 -->
        </tbody>
    </table>

    <script>
        // 2단계에서 AJAX 요청을 추가할 예정
    </script>

</body>
</html>

2단계: AJAX 요청 추가

이제 script 태그 안에 AJAX 요청을 추가하여 데이터를 가져오도록 합니다.

<script>
    $(document).ready(function () {
        $.ajax({
            type: 'GET',
            url: 'https://sample.bmaster.kro.kr/contacts?pageno=3&pagesize=10',
            dataType: 'json',  // JSON 데이터로 응답을 받을 것
            success: function (response) {
                console.log("데이터 불러오기 성공:", response);

                // 테이블의 tbody 요소 가져오기
                let tableBody = $("#contactsTable tbody");

                // 데이터를 반복하여 테이블에 추가
                response.contacts.forEach(function (contact) {
                    let row = `
                        <tr>
                            <td>${contact.no}</td>
                            <td>${contact.name}</td>
                            <td>${contact.tel}</td>
                            <td>${contact.address}</td>
                            <td><img src="${contact.photo}" alt="사진"></td>
                            <td><button class="delete-btn">삭제</button></td>
                        </tr>
                    `;
                    tableBody.append(row);
                });

                // 삭제 버튼 이벤트 추가
                $(".delete-btn").click(function () {
                    $(this).closest("tr").remove();
                });
            },
            error: function (error) {
                console.log("데이터 불러오기 실패:", error);
            }
        });
    });
</script>