자바스크립트 XMLHttpRequest 객체

10 Sep 2023

javascript

자바스크립트에는 HTTP 요청을 보내고 받기 위해 사용할 수 있는 XMLHttpRequest(XML Http Request) 객체가 있습니다. 이 객체는 웹 브라우저와 서버간에 데이터를 주고받는 데 사용되는 기능을 제공합니다. XMLHttpRequest 객체는 비동기적으로 서버에 HTTP 요청을 보내고, 응답을 받으면 해당 응답을 처리할 수 있도록 도와줍니다.

XMLHttpRequest의 기본 사용법

XMLHttpRequest 객체를 사용하여 서버에 HTTP 요청을 보내는 기본적인 사용법은 다음과 같습니다.

XMLHttpRequest 객체를 생성합니다.
```
let xhr = new XMLHttpRequest();
```

요청 방식과 요청 URL을 설정합니다.

let method = 'GET'; // 요청 방식 (GET, POST, PUT, DELETE 등)
let url = 'http://example.com/data'; // 요청 URL
xhr.open(method, url, true); // 비동기적으로 요청을 보내기 위해 true로 설정합니다.

필요한 경우 헤더를 설정합니다.

xhr.setRequestHeader('Content-Type', 'application/json'); // JSON 데이터를 전송할 경우

요청을 보냅니다.
```
xhr.send();
```

서버로부터 응답을 받았을 때의 처리를 정의합니다.

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    let response = JSON.parse(xhr.responseText); // 응답 데이터를 파싱합니다.
    // 응답 데이터를 처리하는 로직을 구현합니다.
  }
}

위와 같은 방식으로 XMLHttpRequest 객체를 사용하여 서버에 HTTP 요청을 보낼 수 있습니다. 비동기적으로 요청을 보내기 때문에, 서버로부터 응답을 기다리는 동안에도 여러 가지 작업을 동시에 수행할 수 있습니다.

XMLHttpRequest의 사용 예시

다음은 XMLHttpRequest 객체를 사용하여 데이터를 불러오는 간단한 예시입니다.

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

이 예시에서는 GET 요청을 보내고, ‘http://example.com/data’라는 URL에서 응답 데이터를 받아와 출력합니다. 서버로부터 받은 응답 데이터는 JSON 형식으로 파싱하여 사용할 수 있습니다.

요약

XMLHttpRequest 객체는 자바스크립트를 사용하여 웹 브라우저와 서버 간에 데이터를 주고받는 데 사용되는 중요한 객체입니다. 이를 통해 비동기적으로 서버에 HTTP 요청을 보내고, 응답을 받아 처리할 수 있습니다. 자주 사용되며 Web API의 일부로서 다양한 웹 개발 시나리오에서 활용됩니다.