[부스트코스] 3-3. Ajax

- Ajax

브라우저의 새로고침 없이 서버로부터 데이터를 얻어오는 방법

부스트코스 2-2에서도 잠깐 다뤘었으니 다시 보고 오자.

 

> 왜 비동기 통신이라 하는가?

페이지를 쭉 그리다가, 서버로부터 데이터를 추가로 요청하는 코드가 나오면 send() 로 요청을 보내놓고 나머지 작업을 수행한다.

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");
oReq.send();
}

addEventListener 안에 있는 function (익명 함수) 은 '이벤트 큐' 에 일단 담긴다.

그리고 아래의 open, send가 먼저 실행되고, 그 다음 서버로부터 Ajax 응답이 오면 이벤트 큐에 담겨있던 익명 함수가 실행되는 것이다.

 

> this.responseText는 문자열이다

JSON.parse() 라는 브라우저 함수를 사용해서 JSON Object로 변환해줄 수 있음.

var jsonobj = JSON.parse(this.reponseText);
var fruit = jsonobj.favorites[0];
var outside = document.querySelector(".outside");
outside.innerHTML += ("<span>" + fruit + "</span>");

 

- 크로스 도메인이란?

여기서 도메인이란 DNS (도메인 네임 서비스) 할 때의 그 도메인.

즉 '다른 도메인간의 통신' 을 크로스 도메인이라 하는데, 크로스 도메인간의 통신에서는 보안상의 이유로 Ajax를 쓸 수가 없다.

 

이때 쓰이는 기술이 JSONP (표준은 아니지만 널리 쓰임), CORS (표준).

AWS S3 다룰때 본 적 있는 CORS 설정이라는 게 이것.

 

- 크롬 개발자 도구를 이용한 디버깅

Network 탭으로 들어가면 받아온 JS, CSS 파일이나 Ajax 통신과 관련된 내용 등 다양한 내용을 확인할 수 있다.

'XHR' 탭으로 들어가면 Ajax 관련 내용을 확인 가능. 특히 시간측정 등에 유용하다.