JavaScript - 문제 미리보기
문제 772
hard
다음은 POST 방식으로 JSON 데이터를 서버에 전송하는 코드입니다. 빈칸에 들어갈 올바른 조합은?
```javascript
const dbParam = JSON.stringify({"limit":10});
const xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
const myObj = JSON.parse(this.responseText);
// 응답 처리 코드
};
xmlhttp.open("POST", "server.php");
xmlhttp.setRequestHeader("Content-type", "_______");
xmlhttp.send("_______");
```
정답: B
POST 방식은 AJAX 통신에서 가장 복잡하지만 실무에서 자주 사용되는 패턴입니다.
POST vs GET 비교:
GET 방식 (URL 파라미터):
```javascript
xmlhttp.open("GET", "server.php?x=" + dbParam);
xmlhttp.send(); // 빈 send()
```
POST 방식 (요청 본문에 데이터):
```javascript
xmlhttp.open("POST", "server.php");
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("x=" + dbParam); // 데이터를 send()에 포함
```
Content-Type 헤더의 중요성:
• `application/x-www-form-urlencoded`: HTML 폼과 같은 형태
• 서버에서 `$_POST["x"]`로 데이터 접근 가능
• 데이터 형태: `"x=" + dbParam` → `"x={"limit":10}"`
다른 옵션들이 틀린 이유:
• `application/json` + `dbParam`: 서버에서 `$_POST`로 접근 불가
• `text/plain`: 일반 텍스트로 전송, 서버 처리 어려움
• `multipart/form-data`: 파일 업로드용, 여기서는 부적절
서버 측 PHP 처리:
```php
// GET: $_GET["x"]
// POST: $_POST["x"]
$obj = json_decode($_POST["x"], false);
echo "Limit: " . $obj->limit; // 10
```
실제 전송되는 데이터:
• 요청 헤더: `Content-Type: application/x-www-form-urlencoded`
• 요청 본문: `x={"limit":10}`
왜 POST를 사용하는가?
• 보안: URL에 데이터가 노출되지 않음
• 용량: 큰 데이터도 전송 가능 (GET은 URL 길이 제한)
• 의미: 서버 상태를 변경하는 작업에 적합
💡 학습 팁
이 문제를 포함한 JavaScript 과목의 모든 문제를 순차적으로 풀어보세요. 진행상황이 자동으로 저장되어 언제든지 이어서 학습할 수 있습니다.