[Spring Boot 기초] Ajax란? ㅣ Ajax를 사용하는 2가지 이유

오늘은 Ajax에 대해서 공부를 할 예정이다.

 

Ajax란?

Ajax(Asynchronous JavaScript and XML, 에이잭스)는 비동기적인 웹 애플리케이션의 제작을 위해 아래와 같은 조합을 이용하는 웹 개발 기법이다.

 

• 표현 정보를 위한 HTML (또는 XHTML) 과 CSS
• 동적인 화면 출력 및 표시 정보와의 상호작용을 위한 DOM, 자바스크립트
• 웹 서버와 비동기적으로 데이터를 교환하고 조작하기 위한 XML, XSLT, XMLHttpRequest (Ajax 애플리케이션은 XML/XSLT 대신 미리 정의된 HTML이나 일반 텍스트, JSON, JSON-RPC를 이용할 수 있다)

DHTML이나 LAMP와 같이 Ajax는 자체가 하나의 특정한 기술을 말하는 것이 아니며, 함께 사용하는 기술의 묶음을 지칭하는 용어이다. 실제로 AFLAX와 같이 사실상 Ajax에 바탕을 두고 있는 유사/복합 기술들이 속속 나타나고 있다.

(출처 위키백과)

 

라고 한다.. 뭐랄까 알아듣기 힘들다.

그럼 사용하는 이유와 함께 다시한번 짚어보자!

 

• 첫 번째 이유.

 

우리가 웹에서 로그인을 생각한다고 치자!

우리는 아이디와 비밀번호를 입력하고 로그인 버튼을 누를 것이다.

그러면 웹에서 서버로 해당 아이디와 비밀번호가 넘어가고, 서버는 DB의 데이터와 비교 후

성공 또는 실패화면을 보여줄 것이다.

근데 여기서 성공화면이나 실패화면은 HTML로 보여주어야 한다.

 

여기까진 ok.

 

문제가 있다.

휴대폰 어플을 사용한다고하면?

휴대폰 어플은 html을 해석할 능력이 없다.

그러면?

 

서버가 휴대폰에게 "성공"이라는 데이터만 보내준다.

휴대폰은 "성공"이라는 데이터를 받으면 메인화면을 보여주는 방식이다.

 

이런 경우, 웹과 서버를 같이 사용한다고 하면

서버를 2개 사용해야 할 것이다.

너무 비효율적이다.

 

그래서!!!

웹에서도 휴대폰 어플에서, 데이터를 주고 받게 만들어 버리는 것이다.

웹에서는 "성공"이라는 데이터를 받으면, 성공.html 문서를 요청하도록 만들면

서버는 1개만 있으면 되는 것이다.

 

• 두 번째 이유

비동기 통신을 하기 위해서다.

비동기 통신이란, 일의 순서에 맞지않게 따로따로 실행되도록 하는 것이다.

한마디로 쓰레드정도로 생각하면 된다!

 

예를 들어서 이야기하자!

 

내가 일을 할 것이다. 일의 순서는

1. 화면에 태양 그리기

2. 숫자 1~10까지 쓰기

3. 물 가져오기

4. 물 마시기

5. 화면에 달 그리기

 

이렇게 일이 있다.

 

우선,

(1)그림을 그린다.

(2) 숫자 1~10까지 쓴다.

(3) 물을 가져온다.

근데!! 여기서 방에서 놀고있는 동생한테 시킬 수가 있다.

동생한테 이렇게 말할 수가 있다.

"야 물떠와, 니가 물 떠오는 동안 나는 다음으로 해야되는 일인 물을 마실게"

근데 물이 없는데 못마신다.. 그럼 다시 이렇게 말할 수 있다.

(4)"야 물떠와, 니가 물 떠오고나면 나를 호출해줘, 내가 물을 마실게 그동안 나는 달을 그리고 있겠어"

 

이게 비동기 처리다!

이것을 cpu와 저장 장치 관계로 생각할 수 있다.

※ 이 때, 하던 일을 멈추고 호출받아 돌아가면, 그것을 "콜백"이라고 한다.