Ajax 응답 처리와 비동기

• 들어가기 전에 브라우저의 새로고침 없이 데이터를 얻어오는 방법이 있습니다.더 좋은 UX(User Experience)를 제공하는 좋은 방법이니, 알아보도록 하죠.

---

학습 목표

1. Ajax 기술은 왜 나왔고, 어떻게 사용하는지 이해합니다.

핵심 개념

• XMLHTTPRequest
• Ajax

학습하기

1. 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 문자열");

3. cross domain 문제

XHR통신은 다른 도메인 간에는 보안을 이유로 요청이 안 됩니다. 즉 A도메인에서 B도메인으로 XHR통신, Ajax 통신을 할 수 없습니다.이를 회피하기 위해서 JSONP라는 방식이 널리 사용되고 있습니다.최근에는 CORS라는 표준적인 방법이 제공되고 있어 이를 활용하는 경우도 등장했습니다.CORS를 사용하기 위해서는 프로그램 코드에서 별도로 해야 할 것이 없고, 백엔드코드에서 헤더 설정을 해야 하는 번거로움이 있습니다. CORS와 JSONP의 적용 방법을 찾아보는 것도 좋은 방법입니다. JSONP는 아직도 많은 곳에서 사용하는 비표준이지만 사실상 표준으로 사용하는 것으로, CORS로 가기 전에 많은 곳에서 사용 중입니다. 그 사용법을 참고로 알아보면 좋습니다.

생각해보기

1. 다양한 웹사이트에서 검색 자동완성 UI에서 어떤 방식으로 데이터를 가져오는지, 크롬 개발자도구의 networks 패널을 열고 확인을 해봅니다. 꽤 많은 사이트가 크로스도메인 문제를 해결하기 위해 JSONP방식으로 통신하는 걸 알 수 있습니다.