AJAX

AJAX 간단 요약

Asynchronous JavaScript And XML

서버와 비동기적으로 데이터 주고받는 자바스크립트 기술을 의미

 

AJAX 이해에 필요한 사전지식: 서버

서버: 데이터 요구하면 데이터 보내주는 프로그램

필수 요구 정보: URL, 요청방식(GET, POST ), 파라미터, 리턴값 타입

 

새로고침없이 서버와 비동기 통신하는 JS코드

비동기 통신: 프로세스의 완료를 기다리지 않고 동시에 다른 작업을 처리하는 방식

장점: 새로고침이 없어 웹페이지 전환이 부드러워짐

 

사용예시

1. 바닐라 JS

document.getElementById('loadData').addEventListener('click', function() {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts/1', true);

    xhr.onload = function() {
        if (xhr.status === 200) {
            const response = JSON.parse(xhr.responseText);
            document.getElementById('result').innerHTML = `<h3>${response.title}</h3><p>${response.body}</p>`;
        } else {
            console.error('요청 실패:', xhr.status);
        }
    };

    xhr.onerror = function() {
        console.error('요청 중 오류 발생');
    };

    xhr.send();
});

 

2. JQuery

$(document).ready(function() {
    $('#loadData').click(function() {
        $.ajax({
            url: 'https://jsonplaceholder.typicode.com/posts/1',
            method: 'GET',
            success: function(response) {
                $('#result').html(`<h3>${response.title}</h3><p>${response.body}</p>`);
            },
            error: function(xhr) {
                console.error('요청 실패:', xhr.status);
            }
        });
    });
});

 

 

CORS관련 에러 자주 봄

CORS: Cross-Origin Resource Sharing 다른 출처의 자원을 공유보안의 이유로 요청을 제한함