HTTP

HTTP(Hyper Text Transfer Protocol)는 웹 브라우저와 웹 서버가 HTML로 작성된 웹페이지나 동영상, 음성 파일등을 주고받기 위한 프로토콜(통신 규약)이다.

클라이언트가 서버에 요청 메시지를 보내고 이에 서버가 응답 메시지를 반환하는 방식이다. 이때, 서버는 클라이언트의 상태를 저장하지 않는닫. HTTP 에서는 전송 계층 프로토콜로 TCP를, 네트워크 계층 프로토콜로 IP를 사용하는 것이 일반적이고, 이 두계층을 합쳐 TCP/IP 라고 부른다.

Ajax

Ajax 는 비동기적으로 서버와 통신하고, DOM을 이용하여 웹페이지를 동적으로 갱신하는 프로그래밍 기법을 말한다. 필요한 부분에 대한 요청만을 보내고 필요로 하는 데이터에 대한 응답을 하여, 통신 및 응답을 페이지 전체가 기다리는 일이 없게 되어 서버가 데이터를 다 보내지 않은 상태라 하더라도 클라이언트를 자유롭게 사용할 수 있다.

XMLHttpRequest

Ajax 기법을 사용할 때, 데이터의 송수진에 XMLHttpRequest 객체를 사용한다. ajax 기법을 사용할 시

XMLHttpRequest 객체를 생성한다.
서버와 통신할 때 사용할 처리 방법을 등록한다.
요청을 전송하고 통신을 시작한다.

XMLHttpRequest 객체를 생성한다.

var req = new XMLHttpRequest();

XMLHttpRequest 객체가 가지는 프로퍼티

프로퍼티	설명	읽기전용여부
`readyStateHttp`	통신 상태(0~4)	읽기전용
`response`	응답 내용	읽기전용
`responseType`	응답 타입 설정/읽기	쓸수있음
`status`	요청에 대한 HTTP 상태 코드	쓸수있음
`timeout`	요청이 자동으로 끝나는 데 걸리는 시간	쓸수있음
`onreadystatechange`	readyState 값이 바뀔 때마다 호출되는 이벤트처리기	쓸수있음

XMLHttpRequest 객체가 가지는 메서드

메서드	설명
`send(data)`	HTTP 요청을 보낸다
`abort()`	현재 실행중인 비동기 통신을 중단한다.
`getAllResponseHeaders()`	수신한 모든 HTTP 헤더를 가져온다

서버와 통신할 때 사용할 처리 방법을 등록한다.

XMLHttpRequest 객체를 생성했다면 이제 서버와 통신할 때의 처리를 정의한다.
비동기 통신을 할 때는 서버와의 통신 상태를 감시할 수 있다. 통신 상태가 바뀌면 readyState 프로퍼티 값이 바뀐다. 그러면 그 변화를 감지하여 readystatechange 이벤트를 발생시킨다. readystatechange 이벤트 처리기에 등록하면 추가적 작업을 할 수 있다.

req.addEventListener("readystatechange", function() {
    ...;
});

요청을 전송하고 통신을 시작한다.

마지막으로 서버에 요청을 보낸다. open() 메서드로 요청을 초기화하고, send() 메서드로 보낸다.

req.open(method, url, [,async [,user [,password]]]);

method: HTTP 메서드 (GET, POST)
url: 접근할 URL
async: 비동기 통신 여부 (기본값은 true)
user: 인증할 때의 사용자 이름(필요시)
password: 인증할 때의 암호(필요시)

// get 메서드로 전송할 때.
req.open("GET", "url?arg1=value1&arg2=value2");
req.send(null);

// post 메서드로 전송할 때
req.setRequestHeader("content-type", "application/x-www-form-urlencoded");
req.send("name=" + encodeURIComponent(value));

ABOUT AUTHOR

ECMAScript6) HTTP 통신 및 Ajax, XMLHttpRequest