[FE] 03. Ajax 응답 처리와 비동기

3. 웹 애플리케이션 개발 - Ajax 응답처리와 비동기

 

1. Ajax와 비동기

- Ajax

UX와 관련이 많은 기술이다.

새로고침이 일어나지 않고 브라우저의 화면 전환 없이 별도로 데이터 요청을 해서 화면에 나타내 주는 것을 말한다.

 

Ajax요청이 있으면 그 요청은 보내놓고 나머지 작업을 수행하고 결과가 돌아오면 그때 화면에 추가적인 화면이 출력되는 자바스크립트 동작이 발생한다.

function ajax() {
   var oReq = new XMLHttpRequest();
	
  oReq.addEventListener("load", function() {
    console.log(this.responseText);
  });
	
   oReq.open("GET", "http://www.example.org/example.txt");
   oReq.send();
}

링크 바로가기

4라인의 익명함수는 8라인, 9라인보다 더 늦게 실행되는 함수이다.

이 익명 함수는 비동기로 실행되며, 이벤트큐에 보관되다가 load이벤트가 발생하면(서버로부터 데이터를 브라우저가 받으면) 그때 call stack 에 실행되고 있는 함수가 없어서 비어있다면 stack에 올라와서 실행된다.

모든 동기적인 작업이 끝난 다음 가장 마지막에 실행된다. (실행 순서 꼭 기억하기)

 

---

* 동기/비동기 이해하기

영상 바로가기

자료 (그림과 코드위주로 이해)

 

 AJAX통신(jQuery라이브러리를 사용한 예제)을 코드단위로 어떻게 비동기로 처리되는지 보여주는 그림

 

---

 

2. Ajax 응답처리

서버로부터 받아온 JSON 데이터는 문자열 형태이므로 브라우저에서 바로 실행할 수가 없다.

따라서 문자열을 자바스크립트 객체로 변환해야 데이터에 접근할 수 있다. 이것은 문자열 파싱을 일일이 해야 하는 불편함이 존재한다.

var oReq = new XMLHttpRequest();
oReq.addEventListener("load", function() {
    console.log(this.responseText);
});
oReq.open("GET", "./json.txt");
oReq.send();

 

브라우저에서는 JSON 객체를 제공하며. 이를 활용해서 자바스크립트 객체로 변환할 수가 있다.

var json객체로변환된값 = JSON.parse("서버에서 받은 JSON 문자열");

object로 변경하여 접근할 수 있다.

 

---

3. cross domain 문제

XHR통신은 다른 도메인 간에는 보안을 이유로 요청이 안 되므로 A도메인에서 B도메인으로 XHR통신, Ajax 통신을 할 수 없다.

이를 회피하기 위해서 JSONP라는 방식이 널리 사용되고 있다. 최근에는 CORS라는 표준적인 방법이 제공되고 있어 이를 활용하는 경우도 등장했다.

CORS를 사용하기 위해서는 프로그램 코드에서 별도로 해야 할 것이 없고, 백엔드코드에서 헤더 설정을 해야 하는 번거로움이 있다.

JSONP는 아직도 많은 곳에서 사용하는 비표준이지만 사실상 표준으로 사용하는 것으로, CORS로 가기 전에 많은 곳에서 사용 중이다.

 

---

 

[추가로 알아보기]

다양한 웹사이트에서 검색 자동완성 UI에서 어떤 방식으로 데이터를 가져오는지 크롬 개발자도구의 networks 패널을 열어 확인해보기

이때 networks 패널에 XHR(Ajax 통신)이 아닌 JS에 출력 된다면 JSONP 방식으로 만들어진 사이트라는 것을 알 수 있다.