자바스크립트에서 XMLHttpRequest 객체의 사용법은 무엇인가요?

Q1: XMLHttpRequest 객체란 무엇인가요?
A1: XMLHttpRequest는 웹 브라우저에서 서버와 비동기적으로 데이터를 주고받을 수 있도록 해주는 자바스크립트 내장 객체입니다. 이를 통해 페이지를 새로고침하지 않고도 서버에서 데이터를 받아와 동적으로 웹 페이지를 업데이트할 수 있습니다.

Q2: XMLHttpRequest 객체를 어떻게 생성하나요?
A2: 객체는 다음과 같이 생성합니다.
```javascript
var xhr = new XMLHttpRequest();
```

Q3: XMLHttpRequest 요청을 어떻게 초기화하나요?
A3: `open` 메서드를 사용합니다.
```javascript
xhr.open(method, url, async);
```
- `method`: "GET", "POST" 등 HTTP 메서드
- `url`: 요청을 보낼 서버 주소
- `async`: 비동기 요청 여부(true가 기본)

Q4: 요청을 서버에 보내려면 어떻게 해야 하나요?
A4: `send` 메서드를 호출합니다.
```javascript
xhr.send(data);
```
- `data`는 POST 등의 요청에서 서버로 보낼 데이터를 말하며, GET 요청 시에는 보통 null이나 생략합니다.

Q5: 요청 응답을 어떻게 처리하나요?
A5: `onreadystatechange` 이벤트 핸들러를 정의해 `readyState`와 `status`를 체크합니다.
```javascript
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) { // 요청 완료
if (xhr.status >= 200 && xhr.status < 300) {
console.log(xhr.responseText); // 서버 응답 데이터
} else {
console.error('Error: ' + xhr.status);
}
}
};
```
- `readyState` 값
- 0: 초기화 안 됨
- 1: open 메서드 호출됨
- 2: 헤더 수신 완료
- 3: 데이터 수신 중
- 4: 데이터 수신 완료
Q6: 요청 헤더는 어떻게 설정하나요?
A6: `setRequestHeader` 메서드를 사용합니다.
```javascript
xhr.setRequestHeader('Content-Type', 'application/json');
```

Q7: 비동기 요청과 동기 요청 차이는 무엇인가요?
A7: 세 번째 매개변수인 `async`를 true로 하면 비동기 요청으로, 이 경우 자바스크립트가 요청 완료를 기다리지 않고 다음 코드를 실행합니다. false면 동기 요청으로, 완료될 때까지 코드 실행이 멈춥니다. 동기 요청은 페이지 응답성을 저하시키므로 권장하지 않습니다.

Q8: 예제 코드 한 번에 보여주세요
A8:
```javascript
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
console.log('Response:', xhr.responseText);
} else {
console.error('Request failed. Status:', xhr.status);
}
}
};
xhr.send();
```

Q9: JSON 데이터를 보내고 받을 때 팁이 있나요?
A9: 보내는 데이터는 JSON.stringify로 문자열화하고, 요청 헤더에 Content-Type을 'application/json'으로 설정하며, 응답도 `JSON.parse(xhr.responseText)`로 파싱합니다.
```javascript
xhr.open('POST', '/api', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var responseJson = JSON.parse(xhr.responseText);
console.log(responseJson);
}
};
var data = JSON.stringify({ name: 'John', age: 30 });
xhr.send(data);
```

Q10: XMLHttpRequest의 대안은 무엇인가요?
A10: 현대 자바스크립트에서는 `fetch` API 또는 Axios 같은 라이브러리를 주로 사용하며, 이들은 프로미스 기반이라 코드가 간결하고 가독성이 좋습니다. XMLHttpRequest는 여전히 레거시 코드나 특정 상황에서 사용됩니다.

`XMLHttpRequest` 객체는 JavaScript에서 서버와 비동기적으로 데이터를 주고받기 위해 사용되는 API입니다.

이 객체는 웹 페이지가 서버와 통신할 수 있도록 해주며, AJAX(Asynchronous JavaScript and XML) 기술의 핵심 요소 중 하나입니다.

`XMLHttpRequest`를 사용하면 페이지를 새로 고치지 않고도 서버로부터 데이터를 받아오거나 서버에 데이터를 전송할 수 있습니다.

기본 사용법 1. 객체 생성 : `XMLHttpRequest` 객체를 생성합니다.

```javascript var xhr = new XMLHttpRequest(); ```

2. 요청 초기화 : `open` 메서드를 사용하여 요청을 초기화합니다.

이 메서드는 HTTP 메서드(GET, POST 등), 요청할 URL, 비동기 여부를 인자로 받습니다.

```javascript xhr.open('GET', 'https://api.example.com/data', true); ```

3. 헤더 설정 (선택적) : 필요에 따라 요청 헤더를 설정할 수 있습니다.

예를 들어, JSON 데이터를 전송할 때는 `Content-Type`을 설정합니다.

```javascript xhr.setRequestHeader('Content-Type', 'application/json'); ```

4. 응답 처리 : `onreadystatechange` 이벤트 핸들러를 설정하여 요청의 상태가 변경될 때마다 호출되는 함수를 정의합니다.

`readyState` 속성은 요청의 현재 상태를 나타내며, `status` 속성은 HTTP 응답 상태 코드를 나타냅니다.

```javascript xhr.onreadystatechange = function() { if (xhr.readyState ===

4) { // 요청이 완료되었을 때 if (xhr.status === 200) { // 성공적으로 응답을 받았을 때 console.log(xhr.responseText); // 서버의 응답 데이터 } else { console.error('Error: ' + xhr.status); // 오류 처리 } } }; ```

5. 요청 전송 : `send` 메서드를 호출하여 요청을 서버로 전송합니다.

POST 요청의 경우 데이터도 함께 전송할 수 있습니다.

```javascript xhr.send(); // GET 요청 // 또는 xhr.send(JSON.stringify({ key: 'value' })); // POST 요청 ``` 예제 다음은 `XMLHttpRequest`를 사용하여 JSON 데이터를 GET 요청으로 가져오는 간단한 예제입니다.

```javascript var xhr = new XMLHttpRequest(); xhr.open('GET', 'https://api.example.com/data', true); xhr.onreadystatechange = function() { if (xhr.readyState ===

4) { if (xhr.status === 200) { var data = JSON.parse(xhr.responseText); console.log(data); } else { console.error('Error: ' + xhr.status); } } }; xhr.send(); ``` POST 요청 예제 다음은 `XMLHttpRequest`를 사용하여 JSON 데이터를 POST 요청으로 전송하는 예제입니다.

```javascript 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) { if (xhr.status === 201) { console.log('Data successfully sent'); } else { console.error('Error: ' + xhr.status); } } }; var data = JSON.stringify({ key: 'value' }); xhr.send(data); ``` 주의사항 - CORS : 다른 도메인에 요청을 보낼 때는 CORS(Cross-Origin Resource Sharing) 정책에 따라 서버가 요청을 허용해야 합니다.

서버에서 적절한 CORS 헤더를 설정하지 않으면 브라우저에서 요청이 차단될 수 있습니다.

- 비동기 처리 : `XMLHttpRequest`는 비동기적으로 동작하므로, 요청이 완료되기 전에 다음 코드가 실행될 수 있습니다.

따라서 응답 데이터를 처리하는 코드는 `onreadystatechange` 또는 `onload` 이벤트 핸들러 내에 작성해야 합니다.

- 상태 코드 : HTTP 응답 상태 코드를 확인하여 요청이 성공적으로 처리되었는지 확인해야 합니다.

일반적으로 200번대 코드는 성공을 의미하며, 400번대 및 500번대 코드는 오류를 나타냅니다.

결론 `XMLHttpRequest`는 웹 애플리케이션에서 서버와의 통신을 가능하게 해주는 중요한 도구입니다.

비동기 요청을 통해 사용자 경험을 향상시키고, 페이지를 새로 고치지 않고도 데이터를 동적으로 업데이트할 수 있습니다.

그러나 최신 웹 개발에서는 `fetch` API와 같은 더 간단하고 직관적인 방법이 많이 사용되고 있으므로, 새로운 프로젝트에서는 `fetch`를 고려하는 것이 좋습니다.