HTTP, Ajax

2019. 8. 2. 14:32ㆍjavascript/web

HTTP

http 는 클라이언트와 서버 사이에 이루어지는 요청/응답 프로토콜이다. 클라이언트인 웹브라우저가 http를 통히여 서버로부터 웹페이지나 그림 정보를 요청하면 서버는 이 요청에 응답하여 필요한 정보를 해당 사용자에게 전달하게 된다.

 

 

 

위의 그림처럼 클라이언트가 서버에 요청하면 서버는 응답을 주는 응답을 해준다. 한번에 요청에는 한번의 응답을 하고 응답을 하는 순간 연결은 종료 된다.  요청을 하면 응답을 줘야하는데. 응답을 주지 않으면 오류가 난다.

(Keep-alive 설정을 하면, 지정된 시간동안 연결을 끊지 않고 요청할수 있다.)

Http의 특징 

비연결 지향 : 요청 하고 응답이 오면 연결을 끊는다.

무상태 : 연결을 끊는 순간 클라이언트와 서버의 통신은 끝나며 상태 정보를 유지하지 않는다. 

 

장점

불특정 다수를 대상으로 하는 서비스에 적절 

서버간의 최대 연결대 수보다 많은 처리를 할 수 있다.

 

단점

연결을 끊어버리기 때문에 이전 상황을 알 수 없다. (이러한 특징을 무상태)

정보유지위해 쿠키와 같은 기술이 등장

 

Cookie    

클라이언트와 서버의 상태 정보를 담고 있는 정보조각

ex) 클라이언트가 로그인에 성공하면 서버는 로그인 정보를 자신의 데이터베이스에 저장하고 동일한 값을

cookie형태로 클라이언트에 보낸다.

(서버는 cookie를 키로하는 값을 데이터베이스에 저장하는 방식으로 "세션"을 유지한다)

 

 

HTTP  패킷

클라이언트가 서버로 요청을 했을때, 보내는 데이터를 HTTP 패킷이라라 표현 한다.

http패킷 구조는 헤더와 바디로 나뉘어진다.

헤더에는 7가지 메서드 방식중 무엇을 썻는지, 클라이언트의 정보, 브라우저 정보, 접속할 url등등과 같은

클라이언트 정보를 담는다.

바디는 보통 비어 있지만 특정데이터를 담아서 서버에 요청을 보낼 수 있다.

 

HTTP Method

  • GET : 정보를 요청하기 위해서 사용한다.(select)
  • POST : 정보를 밀어넣기 위해서 사용한다.(insert)
  • PUT : 정보를 업데이트하기 위해서 사용한다.(update)
  • DELETE : 정보를 삭제하기위해서 사용한다.(delete)
  •  
  • OPTIONS : 웹서버가 지원하는 메서드의 종류응 요청한다.
  • TRACE : 클라이언트의 요청을 그대로 반환한다.
  • HEAD : 헤더 정보만 요청한다. 해당자원이 존재하는지 서버에 문제가 없는지 확인하기 위해 사용

 

(GET,POST 둘다 서버에 요청을 하는 메서드)

데이터 보내는 방법 

1.GET 방식으로 데이터 보내기

www.example.com?id=mommoo&pass=1234 

  • "?" 마크를 통해서 URL의 끝을 알리면서 데이터 표현의 시작점을 알린다.
  • 데이터는 key 와 value 쌍으로 넣어야 한다. ex) key = id,password value = mommoo, 1234
  • & 마크는 구분자의 역활 2개이상의 데이터를 보낼때 구분해준다.
  • URL에 붙이므로 헤더에 포함되어 서버에 요청한다. 바디에 특별히 넣을 내용이 없으므로 빈상태로보내진다. 
  • 간단한 데이터를 넣도록 설계 양의 한계가 있다. 

 

2.POST방식으로 데이터를 보내기

데이터 전송을 기반으로 한 요청 메서드 바디에다가 데이터를 넣어서 보낸다. 

헤더필드중 BODY의 데이터를 설명하는 Content-Type이라는 헤더 필드가들어가고 어떤 데이터 타입인지 명시

 

 

  1. application/x-www-form-urlencoded
  2. text/plain
  3. multipart/form-data

POST방식으로 데이터를 보낼때는 컨텐츠 타입을 꼭 명시해줘야 한다.

작성하지 않는경우 1번의 타입으로 셋팅

 

  • 타입은 GET과 마찬가지로 key value 값으로 데이터를 넣는다. &구분자를 사용
  • 바디에 단순 txt를 넣는다.
  • 파일전송을 할때 많이 쓰는데 BODY의 데이터를 바이너리 데이터로 넣는다는걸 알려준다.

Ajax

Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml)의 약자 브라우저가 가지고있는 XMLHttpRequest 객체(서버와 자유롭게 통신을 해서 데이터를 받아온다)를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법 며 Ajax를 한마디로 정의하자면 JavaScript를 사용한 비동기 통신, 클라이언트와 서버간에 XML 데이터를 주고받는 기술이라고 할 수 있겠습니다.

※ 비동기(async)방식이란?

비동기 방식은 웹페이지를 리로드하지 않고 데이터를 불러오는 방식입니다. 이 방식의 장점은 페이지 리로드의 경우 전체 리소스를 다시 불러와야하는데 이미지, 스크립트 , 기타 코드등을 모두 재요청할 경우 불필요한 리소스 낭비가 발생하게 되지만 비동기식 방식을 이용할 경우 필요한 부분만 불러와 사용할 수 있으므로 매우 큰 장점이 있습니다.

 

Ajax는 html페이지 전체가 아닌 일부분만 갱신할 수 있도록 XMLHttpRequest 객체를 통해 서버에 요청

이 경우 Json이나 xml형태로 필요한 데이터만 받아 갱신하기 때문에 그만큼의 자원과 시간을 아낄 수 있다.

 

Ajax의 장점

  1. 웹페이지의 속도향상
  2. 서버의 처리가 완료 될때까지 기다리지 않고 처리 가능하다.
  3. 서버에서 Data만 전송하면 되므로 전체적인 코딩의 양이 줄어든다.
  4. 기존 웹에서는 불가능했던 다양한 UI를 가능하게 해준다. 사진공유 사이트 Flickr의 경우 사진의 제목이나 태그를 페이지 리로드 없이 수정할 수 있다.

 

 Ajax 의 단점

  1. 히스토리 관리가 안 된다. (보안에 좀 더 신경을 써야한다.)
  2. 연속으로 데이터를 요청하면 서버 부하가 증가할 수 있다.
  3. XMLHttpRequest를 통해 통신을 하는 경우사용자에게 아무런 진행 정보가 주어지지 않는다. 그래서 아직 요청이완료되지 않았는데 사용자가 페이지를 떠나거나 오작동할 우려가 발생하게 된다. 

 

일반 Javascript만으로 Ajax를 하게되면 코딩량도 많아지고 브라우저별로 구현방법이 다른 단점이 있다. 그래서 jquery를 이용하면 더 적은 코딩량과 동일한 코딩방법으로 대부분의 브라우저에서 같은 동작을 할 수 있게 된다.

jquery Ajax를 사용하면, HTTP Get방식과 HTTP Post방식 모두를 사용하여 원격 서버로부터 데이터를 요청할 수 있다.

Jquery는 Ajax처럼 JavaScript의 라이브러리 중 하나로 자바스크립트를 좀 더 사용하기 쉽게 패키징화 시켜놓은 것이다.

 

 

티스토리툴바