[부스트 코스] Ajax 통신의 이해

Ajax (XMLHTTPRequest 통신)

이 기술은 웹에 데이터를 갱신할 때, 브라우저 새로고침 없이 서버로부터 데이터를 받는 것이 좋겠다는 생각에서 출발했다. 더 좋은 UX를 제공할 수 있는 기술이다.

아래 탭 UI를 살펴보자.

상단에 탭을 누를 때마다 컨텐츠가 달라진다.

누르지도 않은 탭의 컨텐츠까지 초기로딩시점에 모두 불러온다면 초기로딩속도에 영향을 줄 것이다.

따라서 동적으로 필요한 시점에 컨텐츠를 받아와서 표현하면 더 좋다.

이 경우가 Ajax 기술을 활용할 수 있는 대표적인 경우다.

 

Ajax 통신으로는 XML, Plain Text, JSON 등 다양한 포맷의 데이터를 주고받을 수 있지만, 일반적으로 사용이 편리한 JSON 포맷으로 데이터를 주고 받는다.

 

JSON(JavaScript Object Notation)

JSON은 속성-값 쌍 또는 "키-값 쌍"으로 이루어진 데이터 오브젝트를 전달하기 위해 인간이 읽을 수 있는 텍스트를 사용하는 개방형 표준 포맷이다. 비동기 브라우저/서버 통신 을 위해, 넓게는 XML을 대체하는 주요 데이터 포맷이다. (위키백과)

 

(클라이언트와 서버와 데이터를 주고 받을 때 특정한 포맷이 있어야한다. 그 포맷의 한 종류로 표준으로 많이 사용되는 것이 JSON이다.)

 

 

Ajax 실행 코드

아래 방법은 XMLHTTPRequest 객체를 사용하는 표준방법이다.

function ajax(data) {
 var oReq = new XMLHttpRequest();
 oReq.addEventListener("load", function() {
   console.log(this.responseText);
 });    
 oReq.open("GET", "http://www.example.org/getData?data=data");//parameter를 붙여서 보낼수있음. 
 oReq.send();
}

XMLHttpRequest 객체를 생성해서, open메서드로 요청을 준비하고, send메서드로 서버로 보낸다.

요청처리가 완료되면(서버로 응답이 오면) load이벤트가 발생하고, 콜백함수가 실행된다. 콜백함수가 실행될 때는 이미 ajax함수는 반환하고 콜스택에서 사라진 상태이다. 이는 setTimeout함수의 콜백함수의 실행과 유사하게 동작하는 비동기 로직 이다.

 

 

CORS(Cross Origin Resource Sharing)

Ajax를 이용하면 CORS라는 용어를 자주 마주하게 된다.

CORS는 교차 출처 리소스 공유로 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중이 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제이다. 웹 애플리케이션은 리소스가 자신의 출처(도메인, 프로토콜, 포트)와 다를 때 교차 출처 HTTP 요청을 실행한다.

 

예를 들어, https://domain-a.com의 프론트엔드 Javascript 코드가 XMLHttpRequest를 사용하여 https://domain-b.com/data.json을 요청하는 경우 교차 출처 요청을 하고 있는 것으로 볼 수 있다. 

 

보안 상의 이유로, 브라우저는 스크립트에서 시작한 교차 출처 HTTP 요청을 제한한다. XMLHttpRequest와 Fetch API는 동일한 출처 정책을 따르기 때문에 이 api를 사용하는 웹 애플리케이션은 자신의 출처와 동일한 리소스만 불러올 수 있으며, 다른 출처의 리소스를 불러오려면 그 출처에서 올바른 CORS 헤더를 포함한 응답을 반환해야한다.

 

CORS에 대한 참고 자료

https://developer.mozilla.org/ko/docs/Web/HTTP/CORS

교차 출처 리소스 공유 (CORS)

https://brownbears.tistory.com/336

CORS

 

[부스트코스 관련 강의 링크]

Ajax통신의 이해 - https://www.edwith.org/boostcourse-web/lecture/16701/

[LECTURE] 4) Ajax통신의 이해 : edwith