XHR이란?

XMLHttpRequest(XHR)은 JavaScript에서 제공하는 객체 중 하나로, 서버와의 HTTP 요청을 비동기적으로 처리하는 데 사용됩니다. XHR 객체를 사용하면 웹 페이지가 새로 고치지 않고도 서버로부터 데이터를 가져오거나 서버로 데이터를 보낼 수 있습니다. 이는 Ajax(Asynchronous JavaScript and XML) 기술의 핵심입니다.

다음은 XHR의 주요 특징과 사용법입니다:

1. 비동기 통신:

• XHR은 비동기적으로 작동하며, 페이지 새로 고침 없이 서버와 데이터를 교환할 수 있습니다. 이는 웹 페이지의 성능을 향상시키고 사용자 경험을 향상시키는 데 도움이 됩니다.

2. HTTP 요청 전송:

• XHR을 사용하여 GET, POST 등의 HTTP 요청을 서버로 전송할 수 있습니다. 이를 통해 데이터를 서버로 보내거나 서버로부터 데이터를 가져올 수 있습니다.

3. 이벤트 기반:

• XHR은 이벤트 기반으로 동작하며, 서버 응답이 도착하면 이벤트 핸들러를 통해 처리할 수 있습니다. 주요 이벤트에는 readystatechange, load, error 등이 있습니다.

4. 보안 제약:

• 브라우저는 동일 출처 정책(Same-Origin Policy)을 적용하여 보안을 유지합니다. 이는 스크립트가 다른 도메인의 리소스에 접근하는 것을 방지합니다. CORS(Cross-Origin Resource Sharing)를 사용하여 이러한 제약을 해결할 수 있습니다.

5. 사용법:

• 간단한 XHR 사용법은 다음과 같습니다:

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/api/data', true);
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        // 요청 완료 및 응답 성공 처리
        console.log(xhr.responseText);
    }
};
xhr.send();

• 이 예제에서는 GET 메서드를 사용하여 'https://example.com/api/data'에서 데이터를 가져옵니다. 요청이 완료되면 콜백 함수가 호출되어 응답을 처리합니다.

XHR은 지금까지 많은 웹 애플리케이션에서 사용되었으며, 현대의 웹 개발에서는 fetch API가 XHR을 대체하는 경향이 있습니다.