Fetch API / Ajax(XHR)

AJAX(Asynchronous JavaScript and XML, 아이아스)

• 비동기적으로 자바스크립트와 XML을 이용하는 방식

• 최근엔 XML 대신 JSON을 주로 사용함

AJAX의 원리

1. 브라우저가 사이트에 접속하면 서버는 사이트의 템플릿을 전달함

2. 수신받은 템플릿 HTML과 CSS를 해석해 기본 레이아웃을 그림

3. 서버는 데이터의 요청방식과 수신받은 데이터를 어떻게 가공해야 하는지를 기술한 JS파일을 전달함

4. 브라우저는 JS파일을 해석해 파일에 기술된 방식대로 서버에 추가 데이터를 요청

5. 서버는 순수 데이터를 응답으로 되돌려줌

6. 브라우저는 수신한 데이터를 해석하여 템플릿의 적절한 위치에 삽입

AJAX의 문제점

• AJAX를 쓸 수 없는 브라우저에 대해 문제가 있음

• HTTP 클라이언트의 기능이 한정 됨

• 보안상의 문제 발생 가능성

• 요청을 남발하여 서버 부하가 늘 수 있음

• 양방향 기술이 아니며, 요청-응답의 사이클이 지나면 통신 소켓을 닫아버리는 문제가 있음

• 검색엔진에서 내용이 검색되지 않음

XHR(XMLHttpRequest)

• 웹 브라우저와 웹 서버 간에 메소드가 데이터를 전송하는 객체 폼의 API

• AJAX 요청을 생성하는 JavaScript API

• AJAX와 같이 페이지를 refresh하지 않고서도 서버와 데이터를 받아오는 등 interaction을 하기 위해 사용

• XHR의 메서드로 브라우저와 서버간의 네트워크 요청을 전송할 수 있음

• 동기적 혹은 비동기적 방법 중 하나로 데이터를 가져올 수 있음

XHR 작동 순서

1. XHR 객체를 만듦

2. open 메소드로 요청을 열고 주소와 HTTP 메소드를 설정 함

3. send 메소드로 요청을 서버로 보냄

4. GET, POST, PUT, PATCH, DELETE, HEAD 등의 메소드를 설정

Fetch API

• 복잡한 XHR을 더 쉽게 이용하기 위해 나온 API

• 최신 API여서 IE에서는 지원이 안됨

• 자체로 Promise 객체를 반환하여 사용하기 편리함

*Promise 객체

• Promise를 이용하면 비동기 프로그래밍시 코드를 간결하게 관리할 수 있음

• Promise 객체가 완료되었을 때는 done 메소드를 호출, 실패했을 때는 fail, 완료되었건 실패했건 행동이 끝났으면 always가 호출

 

*서버와 관련해서 자세한 내용은 프로젝트 혹은 Node.js에서 추가적으로 정리할 예정