Ajax 통신의 이해

• 들어가기 전에

브라우저의 새로고침 없이 데이터를 얻어오는 방법이 있다. 이는 사용자가 더 빠르게 변경된 데이터를 화면의 새로고침 없이 확인할 수 있는 방법으로 더 좋은 UX(User Experience)에 해당하는 방법이다.

• 학습 목표

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

• 핵심 개념

- XMLHTTPRequest 

- Ajax

• Ajax(XMLHTTPRequest 통신)

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

- 화면에서 제공하는 탭을 누를때마다 컨텐츠가 달라지는데, 누르지도 않은 탭의 컨텐츠까지 초기로딩시점에서 모두 불러온다면 초기로딩속도에 영향을 줄 것이다.

- 따라서 동적으로 필요한 시점에 컨텐츠를 받아와서 표현하면 더 좋다. 이 경우가 Ajax 기술을 활용할 수 있는 대표적인 경우이다.

- Ajax 통신으로는 XML, Plain Text, JSON 등 다양한 포맷의 데이터를 주고받을 수 있지만, 일반적으로 사용이 편한 JSON 포맷으로 데이터를 주고받는다.

• JSON

- 표준적인 데이터 포맷을 결정하기 위해서 주로 JSON(JavaScript Object Notation) 포맷을 사용한다.

- 클라이언트와 서버 간에 데이터를 주고받을 때, 서버에서 만들어준 문자열 포맷과, 클라이언트가 그것을 해석하기 위한 문자열 포맷이 있어야 되는데, 데이터의 이름과 데이터의 값 등을 처리할 때 사용하는 포맷방식

- 오브젝트 형식으로 키와 벨류로 구성되어 있다. (ex. { "이름" : "우혜주" }

• Ajax 실행코드

- 아래 방법은 XMLHTTPRequest 객체를 사용하는 표준 방법이다.

var oReq = new XMLHttpRequest();
oReq.addEventListener("load", function() {
    console.log(this.responseText);
});
oReq.open("GET", "http://www.example.org/example.txt");
oReq.send();
 

- XMLHttpRequest 객체를 생성해서, open 메서드로 요청을 준비하고, send 메서드로 서버로 보낸다.

- 요청처리가 완료되면(서버에서 응답이 오면), load 이벤트가 발생하고, 콜백함수가 실행된다.

- 콜백함수가 실행될 때는 이미 ajax 함수는 반환하고, 콜스택에서 사라진 상태이다.

- 이는 setTimeout 함수의 콜백함수의 실행과 유사하게 동작하는 '비동기' 로직이다.