Ajax 통신 (XMLHTTPRequest 통신)

1. Ajax 통신(XMLHTTPRequest 통신)

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

누르지도 않은 탭의 콘텐츠까지 초기 로딩 시점에 모두 불러온다면 초기 로딩 속도에 영향을 줄 것이다.
따라서 동적으로 필요한 시점에 콘텐츠를 받아와 표현하면 더 좋다. 이 경우가 Ajax 기술 및 지난 번 포스팅에서 다룬 콜백함수를 활용할 수 있는 대표적인 경우다.

2. JSON

- 클라이언트와 서버가 데이터를 주고 받는 표준적 포맷
- JSON(JavaScript Object Notation) 포맷

3. Ajax 실행코드

- Ajax 실행코드는 아래와 같다. 아래 방법은 XMLHTTPRequest 객체를 사용하는 표준 방법이다.

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.sent();
}

1) XMLHttpRequest 객체를 생성해서,
2) open 메서드로 요청을 준비하고
3) send 메서드로 서버를 보낸다.
4) 요청처리가 완료되면(서버에서 응답이 오면)
5) load 이벤트가 발생하고
6) 콜백함수가 실행된다.
(콜백함수가 실행될 때는 이미 ajax 함수는 반환하고 콜스택에서 사라진 상태다)


참고: https://developer.mozilla.org/en/docs/Web/API/XMLHTTPRequest

XMLHttpRequest - Web APIs | MDN