JavaScript - 문제 미리보기
문제 770
medium
XMLHttpRequest를 사용하여 서버에서 JSON 데이터를 가져오는 코드입니다. 빈칸에 들어갈 올바른 코드는?
```javascript
const xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
const myObj = JSON.parse(_______);
document.getElementById("demo").innerHTML = myObj.name;
};
xmlhttp.open("GET", "data.json");
xmlhttp.send();
```
정답: B
AJAX 통신에서 서버 응답을 처리하는 핵심 패턴입니다.
XMLHttpRequest 응답 처리:
• `onload` 함수는 서버 응답이 완료됐을 때 실행
• `this`는 `xmlhttp` 객체를 가리킴
• `responseText`는 서버에서 받은 문자열 형태의 응답
다른 옵션들과의 차이:
1. `xmlhttp.responseText` ✅ (동일하게 작동하지만 this 사용이 일반적)
2. `this.responseText` ✅ (정답 - 가장 일반적인 패턴)
3. `xmlhttp.response` ❌ (JSON 파싱이 안 된 상태)
4. `this.response` ❌ (JSON 파싱이 안 된 상태)
전체 동작 과정:
1. `xmlhttp.send()` → 서버에 요청 전송
2. 서버가 JSON 문자열로 응답
3. `onload`함수 실행
4. `this.responseText`로 응답 문자열 가져오기
5. `JSON.parse()`로 JavaScript 객체 변환
6. 객체의 속성 사용
현대적 대안 (Fetch API):
```javascript
fetch("data.json")
.then(response => response.json())
.then(data => console.log(data.name));
```
💡 학습 팁
이 문제를 포함한 JavaScript 과목의 모든 문제를 순차적으로 풀어보세요. 진행상황이 자동으로 저장되어 언제든지 이어서 학습할 수 있습니다.