AJAX(Asynchronous JavaScript And XML)는 웹 애플리케이션에서 비동기적으로 서버와 데이터를 교환하기 위한 기술입니다. 이를 통해 페이지 전체를 새로고침하지 않고도 서버로부터 데이터를 가져오거나 제출할 수 있습니다.
자바스크립트에서 AJAX를 사용하여 서버에 요청을 보내는 방법은 다음과 같습니다.
XMLHttpRequest 객체를 사용한 AJAX 요청
XMLHttpRequest 객체를 사용하여 AJAX 요청을 수행할 수 있습니다. 다음은 간단한 AJAX 요청의 예입니다.
var xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var data = JSON.parse(xhr.responseText);
console.log(data);
}
};
xhr.send();
위의 예제에서는 /api/data 경로로 GET 요청을 보냅니다. xhr.onreadystatechange 이벤트 핸들러에서 요청 상태가 완료되고 응답 상태 코드가 200일 때 응답 데이터를 처리합니다.
jQuery를 사용한 AJAX 요청
jQuery는 AJAX 요청을 더 쉽게 처리할 수 있는 다양한 메서드를 제공합니다. 다음은 jQuery의 $.ajax() 메서드를 사용한 AJAX 요청의 예입니다.
$.ajax({
url: '/api/data',
method: 'GET',
dataType: 'json',
success: function(data) {
console.log(data);
},
error: function(xhr, status, error) {
console.error(error);
}
});
$.ajax() 메서드를 사용하면 URL, 메서드, 데이터 타입 등을 설정할 수 있으며, success와 error 콜백 함수를 통해 응답 데이터를 처리하거나 에러를 처리할 수 있습니다.
Axios를 사용한 AJAX 요청
Axios는 현대적인 자바스크립트 HTTP 클라이언트 라이브러리로, AJAX 요청을 간편하게 수행할 수 있습니다. 다음은 Axios를 사용한 AJAX 요청의 예입니다.
axios.get('/api/data')
.then(function(response) {
console.log(response.data);
})
.catch(function(error) {
console.error(error);
});
Axios의 get() 메서드를 사용하여 GET 요청을 보내고, then() 메서드와 catch() 메서드를 사용하여 응답 데이터를 처리하거나 에러를 처리할 수 있습니다.
요약
AJAX를 사용하여 서버와 비동기적으로 데이터를 교환할 수 있습니다. XMLHttpRequest 객체, jQuery, Axios 등 다양한 방법으로 AJAX 요청을 처리할 수 있습니다. AJAX를 통해 웹 애플리케이션을 보다 동적이고 사용자 친화적으로 만들 수 있습니다.