AJAX

Nov 22, 2024

💡

AJAX(Asynchronous JavaScript and XML)는 웹 페이지가 전체를 새로 고침하지 않고도 데이터를 서버로부터 비동기적으로 가져올 수 있도록 해주는 기술입니다. 이를 통해 사용자 경험을 개선할 수 있습니다.

AJAX의 주요 개념

AJAX는 다음과 같은 기술을 결합하여 비동기 요청을 처리합니다:

JavaScript: 클라이언트 사이드에서 스크립트를 실행합니다.

XMLHttpRequest 객체: 서버와의 비동기 통신을 담당합니다. 최근에는 fetch API가 이를 대체하기도 합니다.

DOM 조작: 서버로부터 받은 데이터를 사용하여 웹 페이지를 동적으로 업데이트합니다.

XML/JSON: 서버와 주고받는 데이터 형식. 요즘은 XML보다 JSON이 더 많이 사용됩니다.

예시

AJAX를 사용하여 데이터를 가져오는 간단한 예시를 보여드리겠습니다:


// XMLHttpRequest를 사용한 AJAX 예시
function fetchData() {
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "https://api.example.com/data", true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            var data = JSON.parse(xhr.responseText);
            console.log(data);
        }
    };
    xhr.send();
}

fetchData();

`fetch` API를 사용한 예시

앞서 설명한 async, await, fetch도 AJAX의 현대적인 구현 방식 중 하나입니다.


// fetch API를 사용한 예시
async function fetchData() {
    try {
        let response = await fetch('https://api.example.com/data');
        if (!response.ok) {
            throw new Error('Network response was not ok ' + response.statusText);
        }
        let data = await response.json();
        console.log(data);
    } catch (error) {
        console.error('There has been a problem with your fetch operation:', error);
    }
}

fetchData();

요약

비동기 처리 방식은 AJAX의 핵심 개념입니다.

AJAX를 통해 웹 페이지는 전체를 새로 고침하지 않고도 서버와 통신하며 데이터를 업데이트할 수 있습니다.

최근에는 XMLHttpRequest보다 fetch API를 사용하여 비동기 요청을 처리하는 것이 더 일반적입니다.