[JavaScript - 19] 비동기 데이터 통신

비동기 데이터 통신

HTTP

• HyperText Transfer Protocol
• 웹 브라우저와 웹 서버가 데이터를 주고받을 수 있게 디자인된 통신 규약
• 웹에서 이루어지는 모든 데이터 교환의 기초
• 규약을 암호화하여 보안을 확장한 규약을 HTTPS라 함
• HTTP 통신의 특징으로 인해 stateless규약이라고도 함

HTTP 통신

• HTTP에서 클라이언스(사용자)가 서버(호스트)에 요청 메시지를 보내고 이에 대해 서버가 응답 메시지를 반환
• 서버는 응답 메시지를 반환한 후 초기상태로 돌아감

HTTP 요청

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

HTTP 응답

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

• 주요 상태 코드
  • 200 : 성공
  • 401 : 인증 실패
  • 403 : 액세스 허용 되지 않음
  • 404 : 요청한 리소스를 찾지 못함
  • 500 : 서버 내부 오류 발생
  • 503 : 서비스를 일시적 사용 불가

XMLHttpRequest

• 서버와 상호작용 하기 위해 사용하는 자바스크립트 빌트인 생성자
• 이를 이용하면 서버(URL)로 부터 데이터를 받아와 전체 페이지의 새로고침 없이도 페이지의 일부만 업데이트하는 비동기 방식의 데이터 통신을 수행할 수 있음
• 이러한 프로그래밍 기법을 Ajax라고 함
  • Ajax(Asynchromnous JacaScript And XML)
    • 웹 서버와 비동기로 통신을 하고 DOM을 이용하여 웹 페이지를 동적으로 갱신하는 프로그래밍 기법

사용 흐름

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

이벤트 핸들링

• 비동기 통신을 할때는 서버와의 통신 상태를 감시할 수 있음
• 발생하는 이벤트에 대한 이벤트 핸들러를 등록할 수 있음
• 객체의 주요 이벤트
  • abort : 요청이 취소되었을 떄
  • errer : 요청이 실패했을 때
  • load : 요청을 성고 하여 응담을 가져올 수 있을 때
  • progress : 데이터를 주고받는 중
  • timeout : 요청 시간을 초과했을 때

요청 초기화 및 전송

• 서버에 요청을 보낼 때 XMLHttpRequest 객체의 open메서드로 요청을 초기화하고, 이후 send메서드로 보내주는 순서로 작업함