[JavaScript] Day 23 - 포토앨범 만들기

HTTP

HTTP(HyperText Transfer Protocol)는 웹 브라우저와 웹 서버가 데이터를 주고받을 수 있게 디자인 된 통신 규약이다.

HTTP는 웹에서 이루어지는 모든 데이터 교환의 기초이며, 이 규약을 암호화하여 보안을 확보한 규약은 HTTPS라 한다.

=> 데이터를 주고 받는다?  HTML, 이미지, 영상, 음성 파일 등을 주고 받는다!

 

HTTP 통신

HTTP에서는 클라이언트가 서버에 요청 메시지를 보내고 이에 대해 서버가 응답 메시지를 반환한다.

서버는 응답 메시지를 반환한 후에 초기 상태로 돌아간다.

이러한 특징으로 인해 HTTP를 stateless 규약이라고도 한다.

 

HTTP 요청

HTTP 요청 메시지는 요청 행, 요청 헤더, 메시지 본문으로 구성된다.

• 요청 행 : 요청 메소드, URL, HTTP 버전 정보 등을 포함한다.
• 요쳥 헤더 : 메시지 정보, 메세지에 저장한 데이터 정보 등을 포함한다.
• 메시지 본문 : 서버 측으로 보내는 데이터를 포함한다.

=> 요청 메소드란?  GET, POST 등 데이터 송수신 방식을 지정한 것

 

HTTP 응답

HTTP 응답 메시지는 응답 행, 응답 헤더, 메시지 본문으로 구성된다.

• 응답 행 : 상태 코드, 보충 메시지, HTTP 버전 정보 등을 포함한다.
• 응답 헤더 : 메시지 정보, 메세지에 저장한 데이터 정보 등을 포함한다.
• 메시지 본문 : 클라이언트 측으로 보내는 데이터를 포함한다.

=> 상태 코드란? 요청이 성공적으로 완료었는지를 보여주는 숫자 코드

 

주요 상태 코드

- 상태 코드는 요청이 성공적으로 완료되었는지를 보여주는 숫자 코드이며, 각 숫자마다 의미가 정해져 있다.

상태 코드	상태 이름	내용
200	OK	요청 성공
401	unauthorized	인증 실패
403	Forbidden	액세스 허용되지 않음
404	Not Found	요청한 리소스를 찾지 못함
500	Internal Server Error	서버 내부 오류 발생
503	Server Unanailable	서비스를 일시적 사용 불가

XMLHttpRequest

SMLHttpRequest는 서버와 상호작용하기 위해 사용하는 자바스크립트 내장 생성자이다.

이를 이용하면 서버(URL)로부터 데이터를 받아와 전체 페이지의 새로고침 없이도 페이지의 일부만 업데이트하는 비동기 방식의 데이터 통신을 수행할 수 있다.

 

=> 이러한 프로그래밍 기법을 Ajax라 한다.

Ajax는 웹 서버와 비동기로 통신하고 DOM을 이용하여 웹 페이지를 동적으로 갱신하는 프로그래밍 기법을 말한다.

 

Ajax 기법에 기초한 XMLHttpRequest 비동기 통신 방법

• XMLHttpRequest 객체를 생성한다.
• 서버와 통신할 때 필요한 정보 및 처리 방법 등을 기입한다
• 요청을 전송해 통신을 시작한다

=> 객체 생성은 new 연산으로 한다.

 

이벤트 핸들링

비동기 통신을 할 때에는 서버와의 통신 상태를 감시할 수 있다.

그리고 이때 발생하는 이벤트에 대한 이벤트 핸들러를 등록할 수 있다.

XMLHttpRequest 객체의 주요 이벤트

이벤트 명	발생하는 시기
abort	요청이 취소되었을 때
error	요청이 실패했을 때
load	요청을 성공하여 응답을 가져올 수 있을 때
progress	데이터를 주고받는 중
timeout	요청 시간을 초과했을 때