[43장, 44장] Ajax, REST API #42
Comments
|
Q. 다음 코드의 빈칸을 채워주세요. const xhr = new XMLHttpReauest();
xhr.open('Get','https://programmers.com/todo/1');
xhr.send();
xhr.onreadystatechange = () => {
//만약 서버 응답이 완료되지 않았다면
if(xhr.readyState !== XMLHttpRequest.(1))return;
// 서버 응답이 완료되었다면
if(xhr.status ===(2)){
console.log(Json.parse(xhr.response));
}else{
console.error('Error',xhr.status,xhr.statusText);
}
};위와 같은 의미의 코드입니다. const xhr = new XMLHttpReauest();
xhr.open('Get','https://programmers.com/todo/1');
xhr.send();
xhr.(3)= () => {
if(xhr.status === 200){
console.log(Json.parse(xhr.response));
}else{
console.error('Error',xhr.status,xhr.statusText);
}
};퀴즈 정답1. DONE2. 200 status 프로퍼티 값이 200이면 정상으로 응답된 상태입니다. 3. onload load는 readystatechange와 달리 HTTP 요청이 성공적으로 완료된 경우만 발생합니다. 따라서 서버 응답이 완료되지 않은 상태는 고려하지 않아도 됩니다. |
|
Q. 다음 빈칸을 채우시오. ( 1 ) 메서드는 JSON 포맷의 문자열을 객체로 변환한다. 서버로부터 클라이언트에게 전송된 JSON 데이터는 문자열이다. 이 문자열을 객체로서 사용하려면 JSON 포맷의 문자열을 객체화해야 하는데 이를 ( 2 )라 한다. ( 3 ) 메서드는 객체르 JSON 포맷의 문자열로 변환한다. 클라이언트가 서버로 객체를 전송하려면 객체를 문자열화해야 하는데 이를 ( 4 )라 한다. 퀴즈 정답
1. JSON.parse
2. 역직렬화 3. JSON.stringify 4. 직렬화 |
|
Q. OX퀴즈
퀴즈 정답
1. X - Ajax의 등장 전 전통적인 웹 페이지의 화면전환 방식은 변경할 필요가 없는 부분까지 처음부터 다시 렌더링 해야 했다.
2. X - JSON의 key값은 반드시 큰따옴표(작은따옴표는 사용 불가)로 묶어야 한다. 3. O |
|
Q. 다음 코드는 todo를 생성하기 위해 POST를 요청하는 코드입니다. 4개의 빈칸을 채워주세요 <!DOCTYPE html>
<html>
<body>
<pre></pre>
<script>
// XMLHttpRequest 객체 생성
const xhr = new XMLHttpRequest();
// HTTP 요청 초기화
// todos 리소스에 새로운 todo를 생성
xhr.( 1 )('POST', '/todos');
// 요청 몸체에 담아 서버로 전송할 페이로드의 MIME 타입을 지정
xhr.( 2 )('content-type', 'application/json');
// HTTP 요청 전송
// 새로운 todo를 생성하기 위해 페이로드를 서버에 전송해야 한다.
xhr.( 3 )(JSON.stringify({ id: 4, content: '인증페이지 리팩토링 하기', completed: false }));
// 이 이벤트는 요청이 성공적으로 완료된 경우 발생한다.
xhr.( 4 ) = () => {
if (xhr.status === 200 || xhr.status === 201) {
document.querySelector('pre').textContent = xhr.response;
} else {
console.error('Error', xhr.status, xhr.statusText);
}
};
</script>
</body>
</html>퀴즈 정답
1. open
2. setRequestHeader
3. send
4. onload
|
|
Q. 다음 HTTP 요청 메서드에서 send 메서드를 호출하면 어떻게 동작하는지 답을 써주세요. const xhr = new XMLHttpRequest();
xhr.open('GET', '/posts')
xhr.setRequestHeader('content-type', 'application/json');
xhr.send(JSON.stringify({ id: 1, content: 'HTML', completed: false }));퀴즈 정답HTTP 요청 메서드가 GET이므로 send 메서드에 페이로드로 전달된 인수는 무시되고 요청 몸체는 null로 설정됩니다. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
데브코스 4기 프롱이들 모던 JS Deep Dive 책 뿌수기😎
아래 템플릿을 복사해서 1개이상 퀴즈를 만들어주세요. 객관식, 주관식, 단답형 모두 상관없습니다!
The text was updated successfully, but these errors were encountered: