컴알못 AJAX 공부 중

AJAX는 비동기 통신 방식 중 하나이다.

이런 비동기 통신 방식은 동기 통신을 사용하기 싫어서 나왔다.

그럼 동기 통신이 왜 쓰기 싫었을까? 그건 동기 통신이 비효율적이기 때문이다.

 

동기 통신을 살펴보자.

클라이언트는 브라우저를 가지고 있고 이 브라우저를 통해서 서버에 요청을 보낼 수 있으며 문서를 열람할 수 있다.

클라이언트의 브라우저는 클라이언트가 입력한 URL을 따라가서 서버에 도달해 요구사항을 말하고 서버로부터 응답을 받아온다.

응답은 대부분 문서를 받아오는 식이다. HTML은 마크업 언어로서 마크업 언어란 문서를 만드는 언어를 뜻한다.

즉, 브라우저는 서버로부터 받아온 HTML을 해석하여 웹페이지라는 문서를 만들고 그걸 보여준다.

 

기존의 HTTP 웹 통신은 동기 방식으로 이루어졌는데 효율이 떨어지는 방식이었다.

이유는 서버로 요청을 보낼 때마다 새로운 웹페이지로 화면을 계속 전환해야만했기 때문이다.

기존의 클라이언트들은 아주 수동적이어서 서버의 요청을 ‘처리’하지 못하고 그냥 그대로 화면에 띄울 뿐이었다.

그래서 서버는 클라이언트의 요청이 올 때마다 문서 하나를 통째로 넘겨줘야했다.

 

철수가 영희한테 편지를 보냈다. 그런데 편지에 영희 이름을 명희라고 적고 말았다.

영희는 철수에게 이름을 수정해줄 것을 부탁한다. 철수는 영희에게 “명희”를 “영희”라고 쓰면 된다고 말한다.

하지만 영희는 그렇게 하지 않았고 결국 철수는 다시 영희에게 이번엔 이름을 바르게 써서 처음부터 끝까지 편지를 다시 써보냈다.

 

기존의 http 방식이 대충 이런 느낌이다.

클라이언트가 서버가 보낸 문서를 그대로 화면에 띄워버리기 때문에 고치면 되는 부분만 알려줄 수도 없고 그냥 새로운 문서를 보내주는 수 밖에 없었다.

그리고 클라이언트가 서버에 요청을 보낸 순간 기존의 문서를 파기하고 새로운 문서로 갈아치우기 때문에 클라이언트는 문서가 온전히 화면에 로딩될 때까지 아무것도 할 수 없다.

이런 불합리함을 해결하기 위해 AJAX가 등장했다.

 

AJAX의 개념은 간단하다. 서버는 HTML 문서가 아니라 필요한 정보만을 전달하고 클라이언트가 기존의 HTML 문서에서 필요한 부분을 알아서 수정하는 거다.

즉, 철수가 ‘명희->영희’라고 알려주면 스스로 편지지에서 영희가 잘못 쓰인 부분을 고쳐쓰는 셈이다.

이렇게하면 서버와 클라이언트 사이의 데이터 전송량도 크게 줄어들게 되어 굉장히 효율적이다.

 

HTTP는 문자 기반 통신 프로토콜이기 때문에 AJAX를 사용한다고해도 서버가 클라이언트에게 전송하는건 문자로 이루어진 문서가 된다.

하지만 HTML처럼 쓸데없이 화면 구성 정보까지 포함하고 있는 문서가 아니다.

XML이나 JSON같은 형식화된 문서로 필요한 정보를 효율적으로 주고 받는다.

XML은 HTML의 확장 형태로 HTML과 매우 비슷한 모양새를 가졌는데 지금은 JSON이 많이 쓰이고 있다.

 

AJAX는 클라이언트가 직접 문서를 수정하는 작업을 수행할 필요가 있기 때문에 클라이언트 측이 동적인 움직임을 보여줘야한다.

그렇기 때문에 당연히 브라우저에서 동작할 수 있는 프로그래밍 언어인 Javscript를 사용해서 Ajax를 구현해야한다.

서버에서 돌아가는 프로그래밍 언어에는 거의 제약이 없지만 클라이언트는 브라우저 하나만을 가지고 http 통신을 하기 때문에 사용할 수 있는 언어가 제한적이다.

 

AJAX의 장점이라면 기존의 웹페이지를 그대로 유지하기 때문에 서버에 요청을 보내고 다른 일을 처리할 수 있다는 점이다.

브라우저는 멀티 쓰레드로 동작하지만 JAVASCRIPT는 싱글 쓰레드로 처리한다.

JAVA에서 배운 멀티쓰레드가 불가능하기 때문에 어떻게 서버에 요청을 보내고 응답을 기다리는 일과 다른 작업을 같이 수행할 수 있는걸까.

그건 비동기 통신이기 때문에 JAVASCRIPT가 비동기적으로 움직이기 때문이다.