[javascript] AJAX를 사용한 비동기 통신 처리 방법
개요
AJAX(Asynchronous JavaScript and XML)는 웹 애플리케이션에서 서버와 비동기적으로 데이터를 주고받기 위해 사용되는 기술입니다. 이를 통해 웹 페이지를 새로고침하지 않고도 동적으로 데이터를 업데이트할 수 있습니다.
XMLHttpRequest 객체 생성
AJAX 통신을 위해서는 XMLHttpRequest 객체를 사용해야 합니다. 다음은 XMLHttpRequest 객체를 생성하는 방법입니다.
var xhr = new XMLHttpRequest();
서버와의 통신 설정
서버와의 통신을 설정하기 위해서는 open 메서드와 send 메서드를 사용합니다. open 메서드는 서버와의 연결을 설정하고, send 메서드는 요청을 보내는 역할을 합니다.
xhr.open('GET', 'http://example.com/api/data', true); // GET 방식으로 'http://example.com/api/data'에 요청
xhr.send(); // 요청 보내기
통신 상태 확인
통신 상태를 확인하기 위해서는 onreadystatechange 이벤트 핸들러를 사용합니다. 이벤트 핸들러가 호출될 때마다 readyState 속성을 확인하여 통신 상태를 파악할 수 있습니다.
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
// 성공적으로 통신된 경우에 대한 코드
var responseData = xhr.responseText; // 받은 데이터 처리
} else {
// 통신이 실패한 경우에 대한 코드
}
}
};
데이터 수신
서버로부터 받은 데이터는 responseText 속성을 통해 확인할 수 있습니다. 이를 적절히 처리하여 웹 페이지에 반영하면 됩니다.
요청 취소
통신 중에 요청을 취소하고 싶은 경우, abort 메서드를 호출하여 요청을 중단할 수 있습니다.
xhr.abort(); // 통신 취소
결론
AJAX를 사용하여 비동기 통신을 처리하는 방법에 대해 알아보았습니다. AJAX를 통해 웹 애플리케이션의 성능과 사용자 경험을 향상시킬 수 있으며, XMLHttpRequest 객체를 사용하여 서버와의 비동기 통신을 구현할 수 있습니다.