AJAX 원리와 그 사례

AJAX 원리와 그 사례

AJAX(Asynchronous JavaScript and XML)는 웹 페이지가 서버와 비동기적으로 데이터를 교환하고, 그 결과를 이용해 동적으로 웹 페이지를 업데이트하는 기술입니다. AJAX를 사용하면 전체 페이지를 새로 고침 하지 않고도 페이지의 일부분만을 업데이트할 수 있어 사용자 경험이 크게 향상됩니다. 이는 웹 애플리케이션의 속도와 반응성을 높여 줍니다.

AJAX의 주요 구성 요소:

• XMLHttpRequest 객체: 브라우저와 서버 간의 비동기 통신을 가능하게 하는 JavaScript 객체입니다. 이 객체를 통해 사용자의 행동에 반응하여 서버에 데이터를 요청하고, 서버로부터 데이터를 받아올 수 있습니다.
• JavaScript와 DOM: 서버로부터 받은 데이터를 기반으로 HTML 문서를 동적으로 변경하거나 업데이트하기 위해 사용됩니다. JavaScript는 로직을 처리하고, DOM(Document Object Model)은 페이지의 구조를 변경합니다.
• CSS와 XSLT: 데이터를 스타일링하고, 표시하는 데 사용됩니다. CSS는 디자인 요소를 조절하고, XSLT는 XML 데이터를 HTML로 변환하는 데 도움을 줄 수 있습니다.
• XML: 초기 AJAX에서는 데이터 교환 포맷으로 XML을 사용했지만, 현재는 JSON(JavaScript Object Notation)이 더 널리 사용됩니다. JSON은 텍스트 기반의 경량 데이터 교환 포맷으로, 읽기 쉽고, 파싱하기 쉬우며, 네트워크에서 데이터를 전송할 때 효율적입니다.

AJAX의 작동 원리:

1. 사용자의 행동에 의해 JavaScript가 트리거됩니다.
2. JavaScript는 XMLHttpRequest 객체를 사용하여 서버에 비동기 방식으로 데이터를 요청합니다.
3. 서버는 요청을 처리한 후 응답을 반환합니다.
4. JavaScript가 서버로부터의 응답을 받으면, 이를 처리하여 웹 페이지의 특정 부분을 업데이트합니다.

AJAX의 장점:

• 향상된 사용자 경험: 전체 페이지를 새로 고침 하지 않고도 페이지의 일부를 업데이트할 수 있어, 사용자가 경험하는 지연 시간이 줄어듭니다.
• 효율적인 서버 통신: 필요한 데이터만 서버로부터 전송받기 때문에, 네트워크 사용량과 서버 부하가 감소합니다.
• 동적 콘텐츠 생성: 사용자와의 상호작용에 따라 실시간으로 콘텐츠를 생성하고 수정할 수 있습니다.

AJAX의 사례

AJAX를 사용한 간단한 사례로, 웹 페이지에 있는 "좋아요" 버튼의 기능을 들 수 있습니다. 사용자가 이 버튼을 클릭하면, 전체 페이지를 새로 고침하지 않고도 해당 게시물의 좋아요 수를 실시간으로 업데이트할 수 있습니다. 이 과정에서 AJAX가 핵심적인 역할을 합니다.

AJAX "좋아요" 버튼의 작동 방식:

1. 사용자 클릭 이벤트: 사용자가 웹 페이지의 "좋아요" 버튼을 클릭합니다.
2. JavaScript 함수 호출: 클릭 이벤트는 JavaScript 함수를 호출합니다. 이 함수는 XMLHttpRequest 객체를 생성하여 서버에 비동기 요청을 보냅니다. 요청에는 사용자가 좋아요를 클릭한 게시물의 식별 정보가 포함됩니다.
3. 서버 처리: 서버는 받은 요청을 처리하여 해당 게시물의 좋아요 수를 데이터베이스에서 하나 증가시킵니다. 그런 다음, 업데이트된 좋아요 수를 응답으로 클라이언트에 보냅니다.
4. 응답과 웹 페이지 업데이트: JavaScript는 서버로부터의 응답을 받아, 응답 데이터(업데이트된 좋아요 수)를 사용하여 웹 페이지의 해당 부분을 동적으로 업데이트합니다. 이 과정에서 페이지의 나머지 부분은 변하지 않고 그대로 유지됩니다.

예제 코드 스니펫:

<button id="likeButton">좋아요</button>
<div id="likeCount">100</div>

<script>
document.getElementById('likeButton').addEventListener('click', function() {
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/update-like', true);
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            // 서버로부터 업데이트된 좋아요 수를 받음
            var newLikeCount = JSON.parse(xhr.responseText).likeCount;
            // 좋아요 수를 표시하는 웹 페이지의 부분을 업데이트함
            document.getElementById('likeCount').innerText = newLikeCount;
        }
    };
    xhr.send(JSON.stringify({postId: '12345'}));
});
</script>

VSCode에서 작성된 AJAX 코드

 

이 코드는 사용자가 "좋아요" 버튼을 클릭하면, AJAX를 사용하여 서버에 비동기 요청을 보내고, 응답으로 받은 업데이트된 좋아요 수를 웹 페이지에 반영하는 기본적인 예제입니다. 이러한 방식으로 AJAX는 사용자 인터랙션이 풍부한 동적 웹 애플리케이션을 구현하는 데 매우 유용합니다.

정리

AJAX는 웹 개발에서 중요한 기술로 자리 잡았으며, 현대 웹 애플리케이션에서 널리 사용되고 있습니다. 그러나 AJAX 사용 시에는 보안과 데이터 처리 방식을 신중히 고려해야 합니다.