자바스크립트 AJAX, 비동기 웹 요청 처리

자바스크립트 AJAX, 비동기 웹 요청 처리

AJAX(Asynchronous JavaScript and XML)는 웹 페이지를 다시 로드하지 않고 서버와 데이터를 주고받을 수 있게 하는 기술입니다. 이 글에서는 AJAX의 기본 개념부터 실제 활용 예제까지 다루어, 비동기 웹 요청 처리를 쉽게 이해하고 사용할 수 있도록 안내하겠습니다.

 

 

목차

1. AJAX란 무엇인가?
2. AJAX 기본 사용법
3. XMLHttpRequest 객체
4. AJAX로 데이터 가져오기
5. AJAX로 데이터 보내기
6. AJAX와 JSON
7. 에러 처리
8. 결론

 

AJAX란 무엇인가?

AJAX는 Asynchronous JavaScript and XML의 약자로, 웹 페이지를 다시 로드하지 않고 서버와 데이터를 주고받을 수 있는 비동기 기술입니다. XML뿐만 아니라 JSON, HTML, 텍스트 등의 다양한 포맷을 사용할 수 있습니다.

 

 

AJAX 기본 사용법

AJAX를 사용하려면 JavaScript에서 XMLHttpRequest 객체를 생성하고 이를 통해 서버에 요청을 보냅니다. 기본적인 사용법은 다음과 같습니다:

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {
        console.log(xhr.responseText);
    }
};
xhr.send();
            

 

 

XMLHttpRequest 객체

XMLHttpRequest 객체는 AJAX 요청을 만들고 관리하는데 사용됩니다. 주요 메서드와 속성은 다음과 같습니다:

• open(method, url, async): 요청 초기화
• send(data): 요청 전송
• readyState: 요청의 현재 상태
• status: HTTP 상태 코드
• responseText: 응답 데이터 (텍스트)

 

 

AJAX로 데이터 가져오기

AJAX를 사용하여 서버에서 데이터를 가져오는 예제입니다. 다음 코드는 GET 요청을 사용하여 데이터를 받아옵니다:

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {
        console.log(xhr.responseText);
    }
};
xhr.send();
            

 

 

AJAX로 데이터 보내기

POST 요청을 사용하여 서버로 데이터를 보내는 예제입니다. 요청 본문에 JSON 데이터를 포함합니다:

var xhr = new XMLHttpRequest();
xhr.open('POST', 'https://api.example.com/data', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {
        console.log(xhr.responseText);
    }
};
var data = JSON.stringify({ key: 'value' });
xhr.send(data);
            

 

 

 

 

AJAX와 JSON

AJAX를 사용할 때 JSON 포맷은 매우 유용합니다. JSON 데이터는 JSON.parse()와 JSON.stringify() 메서드를 사용하여 JavaScript 객체로 변환할 수 있습니다. 다음은 JSON 데이터를 처리하는 예제입니다:

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {
        var jsonResponse = JSON.parse(xhr.responseText);
        console.log(jsonResponse);
    }
};
xhr.send();
            

 

 

에러 처리

AJAX 요청 중 에러가 발생할 수 있습니다. 이를 처리하기 위해 onerror 이벤트 핸들러를 사용할 수 있습니다:

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onerror = function () {
    console.error('Request failed');
};
xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {
        console.log(xhr.responseText);
    }
};
xhr.send();
            

 

 

결론

이 글에서는 자바스크립트(JavaScript) AJAX의 기본 개념부터 다양한 사용법까지 살펴보았습니다. AJAX를 활용하면 웹 페이지를 동적으로 업데이트하고 사용자 경험을 향상시킬 수 있습니다. 이제 여러분도 AJAX를 사용하여 비동기 웹 요청을 처리해보세요.