[JS] 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();
}

addEventListener은 "load" 되는 시점에 함수가 실행이 된다.  뒤에 함수를 이벤트 큐에 보관을 한다. 

링크 바로가기

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

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

 

동기/비동기에 대한 것은 아래 자료를 참고

영상 바로가기

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

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

 

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로 가기 전에 많은 곳에서 사용 중이다. 그 사용법을 참고로 알아보면 좋다.