프론트엔드 로드맵 18 - 자바스크립트 Fetch API / Ajax (XHR)

AJAX란 비동기 자바스크립트와 XML (Asynchronous Javascript And XML)를 말한다. 즉, 서버와 통신하기 위해 XMLHttpRequest 객체를 사용하는 것이다. 우리는 AJAX를 통해 JSON, XML, HTML 등 다양한 포맷을 주고 받는다.

AJAX의 비동기성 덕분에 전체 페이지를 리프레쉬하지 않아도 페이지의 일부분만 업데이트가 가능하다.

 

<AJAX의 두가지 중요 특징>

1. 페이지 새로고침 없이 서버에 요청 2. 서버로부터 데이터를 받고 작업 수행

 

** open(method, url, [async : true])

Request(요청)에 데이터 전송 방식 (GET이냐 POST냐) 선택/ 응답을 (ASYNC  true냐 false냐:동기냐 비동기냐) 선택 / 요청대상 url은 무엇이냐 등등을 입력한다.

** send(data)

요청을 실제로 서버에 전달하는 메서드.

 

<Fetch API>는 Ajax를 구현하는 보다 유연하고 강력한 최신 API(Application Programming Interface, 운영체제 및 프로그래밍 언어 등을 제어함으로써 응용프로그램을 사용할 수 있도록 만든 인터페이스) 방식이다. Fetch API에는 일반적으로 Request(요청)과 Response(응답) 포함하며 이를 처리한다.

GlobalFetch.fetch 메소드를 불러오며 이 메소드들은 Window나 workerGlobalScope와 같은 인터페이스에서 구현됐다.

Headers에는 리퀘스트와 리스폰스 객체가 들어있으며 헤더정보에 보내는 쿼리나 통신 결과의 행동에 대한 선택이 가능하다.

 

<input type="button" value="fetch" onclick="fetch('html')   .then(function(response){     response.text()   .then(function(text){     document.querySelector('article').innerHTML = text;   }) })

 

클라이언트가 서버에 fetch('javascript')를 요청한다. > 서버에서 응답을 하면서 then 이후의 일들을 처리한다 (콜백함수) 

 

Fetch의 기본스펙은 ajax와 기본적으로 다른데,

1. fetch()로 부터 반환되는 Promise 객체는 HTTP error 상태를 거부하지 않는다. 대신 ok 상태가 false인 resolve를 반환하며 네트워크 장애나 요청이 완료되지 못한 상태에는 reject가 반환된다.

2. fetch는 쿠키를 보내거나 받지 않는다. 사이트에서 사용자 세션을 유지 관리해야 하는 경우 인증되지 않는 요청이 발생한다. 쿠키를 전송하려면 자격증명(credentials) 옵션을 반드시 설정해야한다.

 

<fetch() 상세 옵션 설정>

// Example POST method implementation:   postData('http://example.com/answer', {answer: 42})     .then(data => console.log(JSON.stringify(data))) // JSON-string from `response.json()` call     .catch(error => console.error(error));   function postData(url = '', data = {}) { // Default options are marked with *     return fetch(url, { method: 'POST', // *GET, POST, PUT, DELETE, etc.     mode: 'cors', // no-cors, cors, *same-origin cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached     credentials: 'same-origin', // include, *same-origin, omit ('include': 인증서 보낼 때, 'same-origin':호출 스크립트와 동일한 origin을 가지고 있을 때, 'omit':자격증명을 포함하지 않을 때)     headers:         { 'Content-Type': 'application/json',         // 'Content-Type': 'application/x-www-form-urlencoded',     }, redirect: 'follow', // manual, *follow, error     referrer: 'no-referrer', // no-referrer, *client     body: JSON.stringify(data), // body data type must match "Content-Type" header     })     .then(response => response.json()); // parses JSON response into native JavaScript objects }

 

참고 사이트:

https://developer.mozilla.org/ko/docs/Web/API/Fetch_API

https://opentutorials.org/course/3281/20562

https://developer.mozilla.org/ko/docs/Web/API/Fetch_API/Fetch%EC%9D%98_%EC%82%AC%EC%9A%A9%EB%B2%95