JS - ajax

이 기술은 웹에 데이터를 갱신할 때, 브라우저 새로고침 없이 서버로부터 데이터를 받는 것이 좋겠다는 생각에서 출발했습니다.

더 좋은 UX를 제공할 수 있는 기술입니다.

아래 탭 UI를 살펴봅시다.

상단에 탭을 누를때마다 컨텐츠가 달라집니다.

누르지도 않은 탭의 컨텐츠까지 초기로딩시점에 모두 불러온다면 초기로딩속도에 영향을 줄 것이다.

따라서 동적으로 필요한 시점에 컨텐츠를 받아와서 표현하면 더 좋습니다.

이 경우가 Ajax기술을 활용할 수 있는 대표적인 경우입니다.

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");//parameter를 붙여서 보낼수있음. 
 oReq.send();
}