jQuery AJAX 통신 완벽 가이드

jQuery AJAX 통신 완벽 가이드

jQuery는 간편한 AJAX 기능을 제공합니다. 서버와 비동기적으로 데이터를 주고받을 수 있으며, REST API 호출과 JSON 데이터 처리 등 실무에서도 널리 사용됩니다. 이 글에서는 jQuery의 AJAX 사용법과 실무 예제를 중심으로 상세하게 설명합니다.

1. AJAX란?

AJAX(Asynchronous JavaScript and XML)는 웹 페이지를 새로 고침하지 않고 서버와 데이터를 주고받는 기술입니다. JQuery는 이를 매우 간단하게 사용할 수 있도록 $.ajax(), $.get(), $.post() 메서드를 제공합니다.

2. JQuery $.ajax() 기본 사용법

$.ajax({
    url: 'https://jsonplaceholder.typicode.com/posts',
    type: 'GET',
    dataType: 'json',
    success: function(data) {
        console.log(data);
    },
    error: function(error) {
        console.error(error);
    }
});
        

위 예제는 GET 방식으로 데이터를 요청하고, 응답을 JSON 형식으로 처리합니다.

3. $.get()과 $.post() 간편 메서드

3.1. $.get() 사용 예

$.get('https://jsonplaceholder.typicode.com/posts/1', function(data) {
    console.log(data);
});
        

3.2. $.post() 사용 예

$.post('https://jsonplaceholder.typicode.com/posts', {
    title: 'foo',
    body: 'bar',
    userId: 1
}, function(data) {
    console.log(data);
});
        

$.get()과 $.post()는 간단한 요청에 적합하며, 복잡한 설정이 필요한 경우 $.ajax()를 권장합니다.

4. 실무 예제 - REST API 호출

$('#loadDataButton').click(function() {
    $.ajax({
        url: '/api/products',
        type: 'GET',
        dataType: 'json',
        success: function(response) {
            $('#productList').empty();
            response.forEach(function(product) {
                $('#productList').append('<li>' + product.name + '</li>');
            });
        },
        error: function(xhr) {
            alert('데이터 로드 실패: ' + xhr.status);
        }
    });
});
        

위 예제에서는 #loadDataButton 버튼 클릭 시 /api/products API를 호출하여 JSON 데이터를 받아 화면에 리스트로 출력합니다.

5. 주의할 점

• CORS: 도메인이 다를 경우 CORS 설정이 필요합니다.
• 에러 핸들링: 네트워크 오류, 서버 오류에 대비한 처리 필수
• 응답 처리: dataType을 정확하게 지정

6. 결론

JQuery AJAX는 복잡한 비동기 통신을 손쉽게 구현할 수 있는 강력한 도구입니다. REST API 연동, JSON 데이터 처리, 사용자 입력 처리까지 JQuery만으로 빠르게 구현 가능합니다. 위 내용을 실무 프로젝트에서 적극 활용해 보세요.