jQuery 기반 비동기 요청 처리 방법

Ajax를 활용한 비동기 통신은 현대 웹 개발에서 필수적인 기술입니다. 특히 jQuery를 사용하면 간편하게 서버와의 데이터 교환을 구현할 수 있습니다. 아래는 주요 메서드들을 중심으로 한 실용적인 예시입니다.

먼저, jQuery 라이브러리를 CDN을 통해 로드합니다:

<script src="https://code.jquery.com/jquery-1.9.0.min.js"></script>

load() 메서드는 특정 요소에 서버에서 받은 HTML 콘텐츠를 직접 삽입합니다. 파라미터로는 요청 주소, 전송 데이터, 성공 시 실행되는 콜백 함수가 포함됩니다.

$(function() {
    $('#fetchBtn').on('click', function() {
        $('#resultArea').html('![로딩 중](spinner.gif)');
        $('#resultArea').load('/api/data.html', function() {
            console.log('데이터 로드 완료');
        });
    });
});

getJSON()은 서버에서 JSON 형식의 데이터를 가져와 자동으로 파싱하여 사용할 수 있게 해줍니다.

$('#getDataBtn').on('click', function() {
    $.getJSON('/api/users.json', function(response) {
        $.each(response, function(i, user) {
            if (i === 2) alert(user.username);
        });
    });
});

getScript()은 외부 스크립트 파일을 동적으로 불러와 실행합니다. 주로 모듈화된 자바스크립트를 필요 시 로드할 때 유용합니다.

$('#loadModuleBtn').on('click', function() {
    $.getScript('/scripts/utils.js', function() {
        console.log('스크립트 로드 및 실행 완료');
    });
});

get() 메서드는 GET 방식으로 데이터를 요청하며, 콜백 함수를 통해 결과를 처리합니다.

$('#fetchDataBtn').on('click', function() {
    $.get('/api/posts', { page: 1 }, function(data) {
        $('#content').text(data.title);
    }, 'json');
});

post()는 데이터를 서버에 전송할 때 사용되며, 일반적으로 폼 데이터 제출 등에 적합합니다.

$('#submitFormBtn').on('click', function() {
    $.post('/api/submit', {
        title: '제목',
        content: '내용'
    }, function(response) {
        alert('전송 완료: ' + response.status);
    });
});

serialize()는 폼 내부의 입력 값을 이름-값 쌍으로 묶어 URL 인코딩된 문자열로 반환합니다. 이는 $.ajax()와 함께 사용하기 좋습니다.

$('#sendFormBtn').on('click', function() {
    const formData = $('#userForm').serialize();
    console.log(formData); // name=홍길동&age=25
});

ajax()는 가장 기본적이고 강력한 메서드로, 모든 설정을 커스터마이징 가능합니다.

$('#customRequestBtn').on('click', function() {
    $.ajax({
        url: '/api/profile',
        method: 'POST',
        data: { id: 123 },
        dataType: 'json',
        success: function(res) {
            $('#profileName').text(res.name);
        },
        error: function(xhr, status, err) {
            console.error('오류 발생:', err);
        }
    });
});

ajaxSetup()을 이용해 전역 설정을 미리 정의하면, 이후의 모든 Ajax 요청에 자동 적용됩니다.

$.ajaxSetup({
    dataType: 'json',
    timeout: 5000,
    beforeSend: function() {
        $('#loading').show();
    },
    complete: function() {
        $('#loading').hide();
    }
});

ajaxStart()과 ajaxStop()은 전역 이벤트 핸들러로, 모든 비동기 요청 시작/종료 시점을 감지할 수 있습니다.

$(document).ajaxStart(function() {
    $('#loader').show();
}).ajaxStop(function() {
    $('#loader').hide();
});

JSON 데이터를 반복 처리하는 예제입니다. $.each()를 사용해 배열 내 객체를 순회하며 정보를 추출합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8" />
    <title>JSON 데이터 반복 처리</title>
    <script src="https://code.jquery.com/jquery-1.9.0.min.js"></script>
</head>
<body>
    <button id="processBtn">학생 정보 표시</button>
    <div id="output"></div>

    <script>
    $(function() {
        $('#processBtn').on('click', function() {
            const studentList = [
                { name: '김철수', grade: 'A+', major: '컴퓨터공학' },
                { name: '이영희', grade: 'B', major: '경영학' },
                { name: '박민수', grade: 'A', major: '물리학' }
            ];

            $('#output').empty();
            $.each(studentList, function(index, student) {
                $('#output').append(`<p><strong>${student.name}</strong> - ${student.grade} (${student.major})</p>`);
            });
        });
    });
    </script>
</body>
</html>

위 예시들은 실제 개발에서 자주 활용되는 패턴을 기반으로 구성되었습니다. 각 메서드는 상황에 맞게 선택하여 사용하시면 됩니다.

태그: jQuery AJAX 비동기 요청 JSON HTTP GET

7월 8일 22:51에 게시됨

괴물 클럽

jQuery 기반 비동기 요청 처리 방법

인기 태그