HTTP's methods XHR vs fetch

HTTP

속성 2가지

stateless
HTTP의 요청은 모두 독립적이다.
첫번째 요청이 두번째 요청에 영향을 주지 않는다.

connectionless
한번의 요청에 한번의 응답만이 존재.
요청에 대한 응답이 이루어지면 연결은 끊긴다.

브라우저의 기본 구조

1. 사용자 인터페이스 - 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등. 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분이다.
2. 브라우저 엔진 - 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어.
3. 렌더링 엔진 - 요청한 콘텐츠를 표시. 예를 들어 HTML을 요청하면 HTML과 CSS를 파싱하여 화면에 표시함. (크롬은 웹킷 (Webkit) 엔진 사용)

동작과정)
DOM 트리 구축위한 HTML 파싱 - 렌더트리 구축 - 렌더 트리 배치 - 렌더 트리 그리기

4. 통신 - HTTP 요청과 같은 네트워크 호출에 사용됨. 이것은 플랫폼 독립적인 인터페이스이고 각 플랫폼 하부에서 실행됨.
5. UI 백엔드 - 콤보 박스와 창 같은 기본적인 장치를 그림. 플랫폼에서 명시하지 않은 일반적인 인터페이스로서, OS 사용자 인터페이스 체계를 사용.
6. 자바스크립트 해석기 - 자바스크립트 코드를 해석하고 실행.
7. 자료 저장소 - 이 부분은 자료를 저장하는 계층이다. 쿠키를 저장하는 것과 같이 모든 종류의 자원을 하드 디스크에 저장할 필요가 있다. HTML5 명세에는 브라우저가 지원하는 '웹 데이터 베이스'가 정의되어 있다.

HTTP request methods
GET HEAD POST PUT DELETE CONNECT OPTIONS TRACE PATCH

create - POST
read - GET
update - PUT, PATCH
delete - DELETE

PUT (replace)
리소스를 현재 요청으로 교체.

PATCH (modify)
리소스의 일부분을 수정.

HEAD메서드는 GET 메서드와 같은 청을 하지만 reponse body 없이 요청한다.

TRACE 메서드는 타겟 리소스에대해 loop-back 테스트를 수행.

역등성 (Idempotent) :
똑같은 요청을 여러번 보냈을 때 똑같은 응답을 보냄.

XMLHttpRequest(XHR)

XMLHttpRequest(XHR) 객체는 서버와 상호작용하기 위하여 사용된다.
전체 페이지의 새로고침없이도 URL 로부터 데이터를 받아올 수 있다.
이는 웹 페이지가 사용자가 하고 있는 것을 방해하지 않으면서 페이지의 일부를 업데이트할 수 있도록 해준다.
XMLHttpRequest 는 AJAX 프로그래밍에 주로 사용된다.
_동기적, 비동기적_으로 데이터를 fetch 할 수 있다.
XMLHttpRequest.open()의 세번째 인자를 명시하지 않거나, true를 전달하면 비동기적으로 작동하고 아니면 동기적으로 작동한다.

function reqListener () {
  console.log(this.responseText);
}

var oReq = new XMLHttpRequest();
oReq.addEventListener("load", reqListener);
oReq.open("GET", "http://www.example.org/example.txt");
oReq.send();

폼을 제출하기 위한 2가지 방법

using only AJAX
AJAX만을 사용하면 복잡하지만, 통상적으로 더 유연하고 강력하다.

using the FormData API
FormData API를 사용하면 간단하고 빠르지만, 얻은 데이터를 stringigied 할 수 없다.

Fetch API

Fetch API는 요청 및 응답과 같은 HTTP 파이프 라인의 부품에 액세스하고 조작하기 위한 JavaScript 인터페이스를 제공합니다. 또한 네트워크를 통해 비동기적으로 리소스를 가져오는 쉽고 논리적인 방법을 제공하는 글로벌 페치() 방법을 제공한다.

jQuery.ajax()와 다른점

1.fetch()에서 리턴된 Promise는 응답이 404나 500 오류여도 reject하지 않는다.
대신, 정상적으로 resolve한다.(ok status는 false로 설정됨)
reject 되는 경우는 네트워크 장애 또는 요청이 완료되지 못한 경우에만 발생한다.

2.fetch()는 크로스-사이트 쿠키를 받을 수 있다.
fetch를 사용하는 동안 cross site session을 생성할 수 있다.

3.fetch는 쿠키를 전송하지 않는다, 내가 credentials init option을 설정하지 않는다면.

4.no-cors 모드는 요청에서 일부 헤더만 허용한다.

stackoverflow에서 가져온 다른점
You can use the Cache API with the request and response objects;

You can perform no-cors requests, getting a response from a server that doesn't implement CORS. You can't access the response body directly from JavaScript, but you can use it with other APIs (e.g. the Cache API);

Streaming responses (with XHR the entire response is buffered in memory, with fetch you will be able to access the low-level stream). This isn't available yet in all browsers, but will be soon.

fetch
-missing a builtin method to consume documents
-no way to set a timeout yet
-can't override the content-type response header
-if the content-length response header is present but not exposed, the body's total length is unknown during the streaming
-will call the signal's abort handler even if the request has been completed
-no upload progress (support for ReadableStream instances as request bodies is yet to come)

XHR
-there's no way to not send cookies (apart from using the non-standard mozAnon flag or the AnonXMLHttpRequest constructor)
-can't return FormData instances
-doesn't have an equivalent to fetch's no-cors mode
-always follow redirects