클라이언트에서 서버로 데이터 전송(form/ajax-xml, fetch/WebSocket)

사전지식

http message 구조

http header 옵션

request-response 방식에 대한 이해

 

 

 

 

클라이언트가 서버로 전송하는것은

HTTP Request 이다.

다음의 기술들은 이 HTTP Request를 만들어 서버로 보내는 방법들이다.

 

요청에는 기본적으로 method와 url이 설정되어야 한다.

---

HTTP

---

form 

<form method="" action="">
	<input type="text" name="hello" value="안녕하세요"/>
	<input type="submit" value="전송"/>
</from>

mothod : http method 설정 값은 GET 또는 POST

action : 요청할 url 설정

 

 

input type이 submit으로 설정된 버튼을

누르면 form 태그 자손 중 input태그의

value값들을 서버로 전송한다.

 

form은 클라이언트가 서버로부터 응답을 기다려야한다.(동기)

 

 

---

JavaScript

---

AJAX 

Asynchronous Javascript And Xml

비동기 자바스크립트와 XML

 

비동기적인 웹 애플리케이션을 제작하는 기법/사양

 

*서버와 비동기적으로 통신하려면

Http Response를 받았을때 클라이언트의 동작을

미리 정의해주어야한다. 

이때는 콜백이 사용된다.

 

*Http Response에는 status code로 요청에 대한 결과상태를 알 수 있다.

 

아래의 XMLHttpRequest와 fetch API는 이러한 AJAX 사양들이다.

 

---

XMLHttpRequest  (이거보다 Fetch API를 추천)

 

XML Http Request

 

 

 

• XMLHttpRequest 객체 생성

const xhr = new XMLHttpRequest();

여러 비동기 요청을 사용하는경우 각각의 코드들을 따로 모듈화하는 것이 좋다.

 

XMLHttpRequest 객체는 지역변수로 선언하는 것이 좋다.

안그러면 여러 비동기요청을 사용하는경우

이 객체사용을 두고 경쟁 상태가 발생한다.

 

---

 

• onreadystatechange 콜백 설정

 

on Ready State Change 

서버로 요청시 클라이언트의 요구의 상태값(readyState)으로

서버에 대한 응답을 받았는지 안받았는지 판단한다.

이 값이 변했으면 응답을 받았다는 의미이다.

xhr.onreadystatechange = function(){
    
}
xhr.onreadystatechange = function(){
    if(xhr.readyState === XMLHttpRequest.DONE){  //이상없음. 응답을 받음
    	if(xhr.status === 200){  //200번대 : 응답처리가 성공적으로 이루어짐
        	//xhr.responseText나 xhr.responseXML을 통해 response body값을 얻어 활용
        }
    }else{
    	//아직 준비되지 않음
    }
}

 

readyState의 값 

0 (uninitialized) - request가 초기화되지 않음

1 (loading) - 서버와 connected 됨

2 (loaded) - 서버가 request를 받았음

3 (interactive) - request(요청)을 처리하는 중

4 (complete) - request에 대한 처리가 끝났으며 응답할 준비가 완료됨

 

 

status code는 XMLHttpRequest 객체의 status 속성으로 확인할 수 있다.

400번대나 500번대는 오류가 있는것이다.

xhr.status

 

 

응답 메시지 body 

 

responseText : body를 텍스트 문자열로 반환

responseXML : XMLDocument 객체로 반환 (자바스크립트의 DOM 함수들을 통해 이 객체를 다를 수 있음)

 

 

*open 함수의 세번째 인자를 true로 줬거나 생략했으면 콜백함수 정의없이 send() 가 반환하는걸 할당하면 된다.

 

 

---

 

 

• open() - Request 초기화

xhr.open(
  method,          //GET | POST | HEAD
  url,             // 접속할 URL (보안상 써드파티 도메인은 지원하지 않는다.)
  true | false     //동기(기본값) | 비동기
)
//예시
xhr.open("GET", "http://www.example.org/board?page=3", true);

 

 

• Request Header 설정

xhr.setRequestHeader( header-name, value )

 

 

• send() - Message Body 설정 및 보내기

xhr.send(
	body    //GET 메서드는 null을 주고, 그외엔 원하는 데이터를 넘긴다.
)

*GET 메소드는 메시지 바디를 포함하지 않는다.

그외의 Http 메소드들은 Body를 포함한다.

 

 

 

---

fetch API

XMLHttpRequest보다 비동기통신을 더 쉽게 다룰 수 있다. 

하지만 promise같은 자바스크립트 표준을 이해하고 있어야한다.

 

Fetch API의 3가지 인터페이스

Request, Response, Headers 객체

 

 

fetch() 함수는 Promise 객체를 반환 이때 이 객체의 리턴값은 Response 객체

fetch(url);
//예시
fetch("http://www.example.org").then( res => {
	//응답에 대한 처리정의
});
//예시2
const myFunc = async ()=>{
  const res = await fetch("http://www.example.org")
  //응답에 대한 처리정의
}

 

response body 값유형과 추출하는 메소드

response body 값타입	처리 메소드(프로미스반환)
ArrayBuffer	arrayBuffer()
ArrayBufferView
Blob/File	blob()
json	json()
문자열	text()
FormData	formData()
URLSearchParams

 

 

 

request 헤더설정은 두번째인자에 객체형태로

fetch(url, {
    method : "POST", 	     //GET, POST, PUT, DELETE 등
    mode : "same-origin",    //cors 설정
    cache : "no-cache",     //캐시 설정
    credentials: 'same-origin', //인증정보 설정
    headers :{               //헤더 설정
      "header-name" : value,
    },
    redirect : "follow",      //리다이렉션 설정
    referrer : "no-referrer"  //referrer 설정
    body : value,     //request body 설정(GET 메서드는 안됨)
});

 

헤더설정은 옵션이다.

Fetch API Request Header	설명	값(*은 디폴트값)
mode	cross-origin 요청 허용여부 no-cors : src로 불러오는 url에 대한 cors여부. GET, POST, HEAD 이외의 명령을 금지	same-origin | *no-cors | cors
credentials	다른 도메인을 위한 쿠키가 cross-origin 요청에 전달되었는지	*omit | same-origin | include

 

---

 

Fetch API의 3가지 인터페이스

Request와 Response는 Body를 포함할 수 있다.

Body는 다음 객체 중 하나이다.

ArrayBuffer, ArrayBufferView, Blob/File, string, URLSearchParams, FormData

 

Body 추출

arrayBuffer()

blob()

json()

text()

formData()

모두 Promise를 리턴

 

Request

 

 

 

Response

 

 

 

 

Headers 

 

 

 

 

---

Comet 기법 

 

 

웹은 요청/응답 구조

실시간으로 양방향으로 통신하려면?

 

 

 

 

 

 

---

WebSocket