🎯 Quiz : 43 Ajax

[Ryan-Dia]

🚀 Quiz : 43 Ajax

예시)

Q1. 퀴즈

A1

정답 설명

---

복사 코드

<details>
	<summary>A1</summary>
	<div markdown="1">    
	정답 설명
	</div>
</details>

[e6d1fe]

Q1. 서버에서 전송받은 응답을 처리할 때, onreadystatechange 이벤트를 캐치하는 것과 onload 이벤트를 캐치하는 것의 차이점은?

A1

onreadystatechange와 달리 onload 이벤트는 HTTP 요청이 성공적으로 완료되어야 발생하기 때문에, readyState가 DONE인지 확인하는 절차를 생략해도 된다.

[ccconac]

Q1. Ajax OX 퀴즈 (틀렸다면 틀린 이유도 설명해 주세요.)

• 이전 웹페이지와 차이가 없어서 변경할 필요가 없는 부분까지 포함된 완전한 HTML을 서버로부터 매번 다시 전송받기 때문에 불필요한 데이터 통신이 발생한다. []
• 변경할 필요가 없는 부분은 다시 렌더링하지 않는다. 따라서 화면이 순간적으로 깜빡이는 현상이 발생하지 않는다. []
• 클라이언트와 서버와의 통신이 동기 방식으로 동작하기 때문에 서버에게 요청을 보낸 이후 블로킹이 발생하지 않는다. []

A1

X, 전통적인 방식에 대한 설명으로, Ajax는 변경할 부분을 갱신하는 데 필요한 데이터만 서버로부터 전송받기 때문에 불필요한 데이터 통신이 발생하지 않는다.
O
X, 클라이언트와 서버와의 통신이 비동기 방식으로 동작한다.

[Ryan-Dia]

Q1. 다음 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 }));

A1

HTTP 요청 메서드가 GET이므로 send 메서드에 페이로드로 전달된 인수는 무시되고 요청 몸체는 null로 설정됩니다.

[nincoding]

Q1. 다음 질문의 빈칸 a, b, c, d, e 에 들어갈 답을 작성해주세요.

이 기술 ( a )은/는 차세대 웹 2.0의 기술들을 통칭하는 용어로서,
( b )식 자바스크립트와 ( c )을 활용하는 기술입니다.

표준 데이터 형식으로는 ( d )를 사용하며,
브라우저에서 제공하는 Web API인 ( e ) 객체를 기반으로 동작합니다.

이 기술인 ( a ) 을 통해, 웹페이지를 동적으로 갱신하는 프로그래밍을 구현할 수 있습니다.

A1

a: Ajax
b: 비동기
c: XML
d: JSON
e: XMLHttpRequest

[narinn-star]

Q1. 다음 빈칸을 알맞게 채워주세요.

클라이언트가 서버로 객체를 전송하려 객체를 문자열화 하는 것을 ( )라 하고,
문자열을 객체로서 사용하기 위해 JSON 포맷의 문자열을 객체화하는 것을 ( )라 한다.

A1

직렬화, 역직렬화