JQuery 편집하기 (부분)

== AJAX ==

jQuery의 '''[[AJAX]]''' 기능은 서버와의 '''비동기 통신'''을 매우 간단하게 만들어준다.

=== 기본 AJAX 메소드 ===

<syntaxhighlight lang="javascript">
// $.ajax() - 가장 기본적이고 강력한 메소드
$.ajax({
    url: 'https://api.example.com/data',
    type: 'GET', // 또는 method: 'GET'
    dataType: 'json',
    data: {
        userId: 123,
        category: 'electronics'
    },
    success: function(response) {
        console.log('성공:', response);
    },
    error: function(xhr, status, error) {
        console.log('오류:', error);
    },
    complete: function() {
        console.log('완료 (성공/실패 관계없이)');
    }
});

// Promise 스타일로도 사용 가능
$.ajax({
    url: 'api/data.json',
    type: 'GET',
    dataType: 'json'
}).done(function(data) {
    console.log('성공:', data);
}).fail(function(xhr, status, error) {
    console.log('실패:', error);
}).always(function() {
    console.log('항상 실행');
});
</syntaxhighlight>

=== 간편 AJAX 메소드 ===

<syntaxhighlight lang="javascript">
// GET 요청
$.get('api/users.json', function(data) {
    console.log('사용자 데이터:', data);
});

// POST 요청
$.post('api/users', {
    name: 'John Doe',
    email: 'john@example.com'
}, function(response) {
    console.log('사용자 생성:', response);
});

// JSON 데이터 가져오기
$.getJSON('api/config.json', function(config) {
    console.log('설정:', config);
});

// 스크립트 동적 로딩
$.getScript('js/dynamic-script.js', function() {
    console.log('스크립트 로드 완료');
});
</syntaxhighlight>

=== 폼 데이터 전송 ===

<syntaxhighlight lang="javascript">
// 폼 데이터 직렬화
var formData = $('#myForm').serialize();
// 결과: "name=John&email=john@example.com&age=30"

var formArray = $('#myForm').serializeArray();
// 결과: [{name: "name", value: "John"}, {name: "email", value: "john@example.com"}]

// 폼 AJAX 제출
$('#myForm').submit(function(event) {
    event.preventDefault();
    
    $.ajax({
        url: $(this).attr('action'),
        type: $(this).attr('method'),
        data: $(this).serialize(),
        success: function(response) {
            alert('폼 제출 성공!');
        },
        error: function() {
            alert('폼 제출 실패!');
        }
    });
});
</syntaxhighlight>

=== 파일 업로드 ===

<syntaxhighlight lang="javascript">
// FormData를 사용한 파일 업로드
$('#fileForm').submit(function(event) {
    event.preventDefault();
    
    var formData = new FormData(this);
    
    $.ajax({
        url: 'upload.php',
        type: 'POST',
        data: formData,
        processData: false, // jQuery가 데이터를 처리하지 않도록
        contentType: false, // content-type 헤더를 설정하지 않도록
        success: function(response) {
            console.log('업로드 성공:', response);
        },
        error: function() {
            console.log('업로드 실패');
        }
    });
});
</syntaxhighlight>

=== AJAX 전역 설정 ===

<syntaxhighlight lang="javascript">
// 전역 AJAX 설정
$.ajaxSetup({
    timeout: 10000, // 10초 타임아웃
    cache: false,   // 캐시 비활성화
    headers: {
        'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
    }
});

// 전역 AJAX 이벤트
$(document).ajaxStart(function() {
    console.log('AJAX 요청 시작');
    $('#loading').show();
});

$(document).ajaxStop(function() {
    console.log('모든 AJAX 요청 완료');
    $('#loading').hide();
});

$(document).ajaxSuccess(function(event, xhr, settings) {
    console.log('AJAX 요청 성공:', settings.url);
});

$(document).ajaxError(function(event, xhr, settings, error) {
    console.log('AJAX 요청 실패:', settings.url, error);
});
</syntaxhighlight>