HTML 중급 네트워크

HTML AJAX 소개

HTML AJAX 소개 — 중급

AJAX 소개

1. 도입 (왜 배워야 하는가)

AJAX(Asynchronous JavaScript and XML)는 웹 애플리케이션의 사용자 경험을 향상시키기 위해 필수적인 기술입니다. AJAX를 사용하면 페이지를 새로 고치지 않고도 서버와 데이터를 주고받을 수 있습니다. 이는 사용자가 더 빠르고 효율적으로 웹 애플리케이션을 사용할 수 있게 해줍니다.

예를 들어, 쇼핑몰에서 제품을 검색할 때마다 페이지를 새로 고치지 않고 검색 결과를 실시간으로 업데이트할 수 있습니다. 만약 AJAX를 사용하지 않는다면, 사용자는 매번 페이지가 새로 고쳐지는 불편함을 겪어야 하고, 이는 사용자 이탈로 이어질 수 있습니다. 따라서 AJAX는 현대 웹 개발에서 매우 중요한 요소입니다.

2. 핵심 개념 설명

비동기성(Asynchronous): 요청을 보낸 후, 응답을 기다리지 않고 다른 작업을 계속할 수 있는 방식입니다. 이는 마치 카페에서 주문을 하고, 음료가 나올 때까지 기다리지 않고 다른 사람과 대화하는 것과 같습니다.
XMLHttpRequest: AJAX의 핵심 객체로, 서버와 비동기적으로 통신하는 데 사용됩니다. 이는 마치 편지를 쓰고, 우편함에 넣어 놓은 후 편지가 도착하기를 기다리는 상황과 유사합니다.
JSON: AJAX에서는 데이터를 주고받는 형식으로 XML뿐만 아니라 JSON(JavaScript Object Notation)이 많이 사용됩니다. JSON은 가벼운 데이터 교환 형식으로, 사람에게도 읽기 쉽고 기계에게도 쉽게 파싱할 수 있습니다.

용어	설명
AJAX	비동기적으로 서버와 통신하는 기술
비동기성	요청과 응답을 동시에 진행할 수 있는 방식
XMLHttpRequest	AJAX의 핵심 객체, 서버와의 통신을 담당
JSON	데이터 교환 형식, 경량화된 텍스트 형식

3. 기본 코드 예제

아래는 AJAX를 사용하여 서버에서 데이터를 가져오는 기본 예제입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>AJAX 기본 예제</title>
    <script>
        function loadData() {
            var xhr = new XMLHttpRequest(); // XMLHttpRequest 객체 생성
            xhr.onreadystatechange = function() {
                if (xhr.readyState = 4 && xhr.status = 200) { // 요청이 완료되고 성공적일 때
                    document.getElementById("result").innerHTML = xhr.responseText; // 결과 표시
                }
            };
            xhr.open("GET", "data.txt", true); // 비동기 GET 요청 준비
            xhr.send(); // 요청 전송
        }
    </script>
</head>
<body>
    <h1>AJAX 기본 예제</h1>
    <button onclick="loadData()">데이터 로드</button>
    <div id="result"></div> <!-- 결과 표시 영역 -->
</body>
</html>

실행 결과

버튼 클릭 시 data.txt 파일의 내용이 <div id="result"></div> 영역에 표시됩니다.

코드 한 줄씩 동작 설명

var xhr = new XMLHttpRequest(); - AJAX 요청을 만들기 위한 객체를 생성합니다.
xhr.onreadystatechange = function() {...} - 요청 상태가 변경될 때 호출될 함수를 정의합니다.
if (xhr.readyState = 4 && xhr.status = 200) {...} - 요청이 완료되고, 응답이 성공적일 경우의 조건문입니다.
document.getElementById("result").innerHTML = xhr.responseText; - 서버에서 받은 데이터를 HTML로 표시합니다.
xhr.open("GET", "data.txt", true); - GET 방식으로 data.txt 파일에 대한 요청을 준비합니다.
xhr.send(); - 요청을 서버로 전송합니다.

4. 실전 활용 예제

1. 쇼핑몰 장바구니 구현

사용자가 장바구니에 상품을 추가할 때마다 AJAX를 사용하여 서버에 상품 정보를 전송하고, 장바구니의 상태를 업데이트합니다.

<button onclick="addToCart(1)">상품 추가</button>
<script>
    function addToCart(productId) {
        var xhr = new XMLHttpRequest();
        xhr.open("POST", "addToCart.php", true);
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xhr.onreadystatechange = function() {
            if (xhr.readyState = 4 && xhr.status = 200) {
                alert("장바구니에 추가되었습니다.");
            }
        };
        xhr.send("id=" + productId);
    }
</script>

2. 실시간 검색

사용자가 검색어를 입력할 때마다 AJAX를 통해 서버에서 해당 검색어에 맞는 결과를 실시간으로 가져옵니다.

<input type="text" onkeyup="search(this.value)">
<div id="searchResults"></div>
<script>
    function search(query) {
        var xhr = new XMLHttpRequest();
        xhr.open("GET", "search.php?q=" + query, true);
        xhr.onreadystatechange = function() {
            if (xhr.readyState = 4 && xhr.status = 200) {
                document.getElementById("searchResults").innerHTML = xhr.responseText;
            }
        };
        xhr.send();
    }
</script>

5. 흔한 실수와 주의사항

실수 1: `readyState` 체크 누락

잘못된 코드:

if (xhr.status === 200) { ... }

올바른 코드:

if (xhr.readyState = 4 && xhr.status = 200) { ... }

설명: 요청이 완료된 상태를 확인하지 않으면 잘못된 응답을 처리할 수 있습니다.

실수 2: 비동기 요청의 문제

비동기로 요청을 보내고, 응답을 기다리는 동안 다른 코드가 실행되기 때문에 데이터가 예상과 다를 수 있습니다.
해결 방법: 콜백 함수를 잘 활용하여 응답이 올 때까지 코드의 흐름을 제어합니다.

6. 정리

AJAX는 사용자 경험을 향상시키는 중요한 기술입니다.
비동기성을 통해 페이지 새로 고침 없이 데이터 통신이 가능합니다.
XMLHttpRequest 객체를 사용하여 서버와 데이터를 주고받습니다.
실무에서 장바구니 업데이트 및 실시간 검색 등에서 자주 활용됩니다.

다음에 학습하면 좋은 주제

Fetch API: AJAX의 현대적 대안으로, Promise 기반의 API입니다.
JSON과 AJAX: JSON 데이터를 처리하는 방법에 대해 학습합니다.
비동기 프로그래밍: JavaScript의 비동기 처리에 대한 심화 학습을 진행합니다.

학습