Ajax 응답 처리와 비동기

• 들어가기 전에

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

• 학습 목표

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

• 핵심 개념

- XHR(XLMHTTPRequest)

- Ajax

• 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에 올라와서 실행된다.

· 실제로 addEventListener()는 빨리 실행이 된다. 실행되어서 ' "load" 시점에 이것을 실행해야 되는구나 '해서 이것을 큐에 보관한다.

· 그리고 나서 addEventListener()의 역할은 끝나고, 금방 선택된 콜백함수는 이벤트 큐(메모리 공간)에 보관된다.

· 그 다음 어떤 Ajax 요청을 보내는 것으로 전송되는 open(), send() 메소드가 실행된다. 그리고 ajax() 함수는 반환..

· 그 후 어떤 Ajax 응답이 오면, 그때 이벤트 큐에 있던 정보가 이미 Ajax에서 빠져나와 나중에 실행되는 것이다

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

• Ajax 응답 처리

- 서버로부터 받아온 JSON 데이터는 문자열 형태이므로 브라우저에서 바로 실행할 수 없다. 따라서 문자열을 자바스크립트 객체로 변환해야 데이터에 접근할 수 있다. 이것을 가능하게 하기 위해서는 문자열 파싱을 일일이 해야하는 불편함이 있다. 

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

· 여기서 this가 가르키는 것은 addEventListener

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

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

• cross domain 문제

- XHR 통신은 다른 도메인 간에는 보안을 이유로 요청이 안된다. 

- 즉 A도메인에서, B도메인으로 XHR 통신, Ajax 통신을 할 수 없다. 이를 회피하기 위해서 JSONP 라는 방법이 널리 사용되고 있다. 최근에는 CORS 라는 표준적인 방법이 제공되고 있어 이를 활용하는 경우도 등장했다. 

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

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