JavascriptJS Memo

HTTP 통신과 Ajax

Javascript, HTTP, Ajax

HTTP 통신과 Ajax

HTTP

HTTP는 Hyper Text Transfer Protocol의 줄임말로 HTML로 작성된 웹 페이지나 동영상, 음성 파일 등을 주고 받기 위한 통신 규약이다.
이것을 SSL로 암호화한 것이 HTTPS이다.

HTTP 통신

http

HTTP에서는 클라이언트가 요청 메세지(Request)를 보내고 서버가 응답메세지(Response)를 반환한다.
HTTP에서는 전송 계층 프로토콜로 TCP를 사용하고 네트워크 계층 프로토콜로 IP를 사용하는데 이를 합쳐 TCP/IP라고 부른다. 즉 IP주소를 사용한 포트 번호를 이용해 통신할 컴퓨터를 결정한다. 기본적으로 80번 포트를 사용한다.

Ajax

Ajax는 Asynchronous(비동기적) Javascript + XML로 XMLHttpRequest라는 자바스크립트 객체를 이용하여 웹 서버와 비동기로 통신하고 DOM을 이용하여 웹 페이지를 동적으로 갱신하는 프로그래밍 기법을 말한다.

Ajax Listcycle

주로 JSON과 text 데이터를 사용하고 있다. Ajax의 포인트는 필요한 부분만 DOM으로 변경한다는 것이다. 또한 통신이 비동기적으로 이루어지기 때문에 서버가 데이터를 다 보내지 않은 상태라 하더라도 클라이언트를 자유롭게 사용할 수 있다.

즉 Ajax의 장점을 정리하자면

  1. 최소한의 데이터 통신으로 속도가 빠르고 부하가 적다.
  2. 비동기 통신이기 때문에 클라이언트가 다른 작업을 할 수 있다.
  3. 웹 페이지의 갱신을 클라이언트가 담당하여 페이지 전환대신 일부분만 변경하여 빠른 렌더링이 가능하다.

JSON

JSON은 JavaScript Object Notation의 약자로 클라이언트와 서버간의 데이터 교환 규칙(데이터 포맷)을 말한다. JSON은 일반 데이터 포맷보다 효과적인 데이터 구조화가 가능하며 XML보다 가볍기 떄문에 사용이 편리하다. 또한 순수한 텍스트로 구성되어 있다.

1
2
3
4
5
6
{
  "name": "Jang",
  "gender": "male",
  "age": 26,
  "alive": true
}

키는 반드시 큰 따옴표로 둘러싸야 한다.

JSON.stringify

JSON.stringify 메서드는 객체를 JSON 형식의 문자열로 변형한다.

1
2
3
4
5
6
7
8
9
10
11
var o = {
  name: 'Jang',
  gender: 'male',
  age: 26
}

var strObj = JSON.stringify(o);
console.log(typeof strObj, strObj);


// 값의 타입이 Number이면 필터링되어 반환하지 않게 만들어 보세요.!

JSON.parse

JSON.parse는 JSON 데이터 문자열을 객체로 반환한다. 서버로부터 전달된 JSON 데이터는 텍스트이기 때문에 객체화하여야 한다. 이를 역직렬화라고 한다.

1
2
3
4
// JSON 형식의 문자열 => 객체
// 위 예제와 이어서 진행.
var obj = JSON.parse(strObj);
console.log(typeof obj, obj); // object { name: 'Lee', gender: 'male' }

XMLHttpRequest

Ajax 기법을 사용할 때에는 자바스크립트의 XMLHttpRequest 객체를 사용하여야 한다. 기본적인 처리 흐름으로는

  1. XMLHttpRequest 객체를 생성한다.
  2. 서버와 통신할 떄 사용할 처리 방법을 등록한다.
  3. 요청을 전송하고 통신을 시작한다.
1
2
3
4
5
6
// XMLHttpRequest 객체의 생성
var xhr = new XMLHttpRequest();
// 비동기 방식으로 Request를 오픈한다
xhr.open('GET', '/users');
// Request를 전송한다
xhr.send();

open 메서드를 사용하여 서버로의 요청을 준비한다.

매개변수
설명
method
HTTP method(“GET”,”POST”,”PUT”,”DELETE”)
async
비동기 조작여부, default는 true

send 메서드로 준비된 요청을 서버에 전달한다. 기본적으로 GET,POST에 따라 그 방식이 달라진다. GET의 경우 URL의 일부분을인 쿼리 문자열로 데이터를 전달하는 반면에 POST는 페이로드를 Request Body에 담아 전달한다.

HTTP Request Example

페이로드란?

페이로드라는 용어는 큰 데이터 덩어리 중에 ‘흥미 있는’ 데이터를 구별하는 데 사용된다. 이 용어는 운송업에서 비롯하였는데, 지급(pay)해야 하는 적화물(load)을 의미한다. 예를 들어, 유조선 트럭이 20톤의 기름을 운반한다면 트럭의 총 무게는 차체, 운전자 등의 무게 때문에 그것보다 더 될 것이다. 이 모든 무게를 운송하는데 비용이 들지만, 고객은 오직 기름의 무게만을 지급(pay)하게 된다. 그래서 ‘pay-load’란 말이 나온 것이다.

프로그래밍에서 주로 메시지 프로토콜(message protocols) 중에 프로토콜 오버헤드(protocol overhead)와 원하는 데이터를 구별할 때 사용된다.
(출처 : 위키백과)

https://stackoverflow.com/questions/978061/http-get-with-request-body

XMLRequest.setRequestHeader

이것은 HTTP Request Header의 값을 설정한다. Content-type은 Request Body에 담아 전송할 데이터의 MIME-type의 정보를 표현한다 MIME-type이란
클라이언트에게 전송된 문서의 다양성을 알려주기 위한 메커니즘이다. text타입(text/plain, text/html, text/css, text/javascritp), Application(application/json, application/x-www-form-urlencode), File 업로드(multiport/formed-data)가 있다.

1
2
3
4
5
6
7
8
9
// json으로 전송하는 경우
xhr.open('POST', '/users');

// 클라이언트가 서버로 전송할 데이터의 MIME-type 지정: json
xhr.setRequestHeader('Content-type', 'application/json');

var data = { id: 3, title: 'JavaScript', author: 'Park', price: 5000};

xhr.send(JSON.stringify(data));

이런식으로 사용한다.

또한 클라이언트가 서버에 요청할 때 서버가 Send Back할 데이터의 MIME-type을 Accept로 정할 수 있다. Accept를 설정하지 않으면 send 메서드 호출 시 Acccept 헤더가 /로 전송된다.

응답처리

1
2
3
4
5
6
7
8
9
10
11
12
13
// XMLHttpRequest.readyState 프로퍼티가 변경될 때 이벤트 핸들러를 호출.
xhr.onreadystatechange = function (e) {
  // readyStates는 XMLHttpRequest의 상태(state)를 반환
  // readyState: 4 => DONE(서버 응답 완료)
  if (xhr.readyState === XMLHttpRequest.DONE) {
    // status는 response 상태 코드를 반환 : 200 => 정상
    if(xhr.status === 200) {
      console.log(xhr.responseText);
    } else {
      console.log('Error!');
    }
  }
};

여기서 onreadystatechange는 Response가 클라이언트에 도달하여 발생하게 된 이벤트를 감지하여 콜백함수를 실행하여 준다. 이 상황은 readyState가 변했을 떄 실행횐다.

readyState의 값은 0~4까지 있으며 0은 open메서드 호출 이전, 1은 호출 완료(OPENED), 2는 (HEADERS_RECIVED), 3은 LOADING, 4는 DONE(완료)이다.

Share