1. AJAX란?
AJAX는 Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml)의 약자로 JavaScript와 XML을 이용한 비동기적 정보 교환 기법이며, 브라우저가 가지고있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 도구이다.
AJAX는 마이크로소프트사가 만든 개념으로, 1999년에 처음으로 인터넷 익스플로러에 탑재되었지만, 5년 동안이나 아예 쓰이지 않았다. 2004년에 구글이 지메일 서비스를 시작하면서 AJAX를 사용했는데 지메일은 이를 통해 페이지 리로드 없이 받은 정보를 사람들에게 보여줄 수 있었다. 메일을 전송하거나 확인할 때 화면이 깜빡거리는 일이 사라진 것이다!! 그때서야 AJAX는 빛을 보게 되었다.
2. AJAX의 원리
AJAX의 구성요소는 아래와 같다.
- 웹 페이지의 표현을 위한 HTML과 CSS
- 데이터에 접근하거나 화면 구성을 동적으로 조작하기 위해 사용되는 DOM 모델
- 데이터의 교환을 위한 JSON이나 XML
- 웹 서버와의 비동기식 통신을 위한 XMLHttpRequest 객체
- 위에서 언급한 모든 기술을 결합하여 사용자의 작업 흐름을 제어하는 데 사용되는 자바스크립트
모든 AJAX동작은 위 구성요소들을 사용하여 이루어진다. AJAX를 이용한 웹 앱은 자바스크립트 코드를 통해 웹 서버와 통신을 하게 되는데, 사용자의 이벤트(onclick, onscroll, onmouseover 등)가 발생하면 핸들러를 통해 자바스크립트를 호출한다.
자바스크립트에서는 XmlHttpRequest 객체를 이용하여 서버로 요청을 보낸다. 그동안 웹 브라우저는 응답을 기다릴 필요 없이 다른 작업을 수행한다.
서버측에서 XmlHttpRequest 객체를 전달 받으면 AJAX요청을 처리한다. 서버는 처리한 결과를 HTML, XML 또는 JSON 형태의 데이터로 웹 브라우저에 전달한다. 이때 전달되는 응답은 새로운 페이지를 전부 보내는 것이 아니라 필요한 데이터만을 전달한다.
클라이언트는 서버로부터 전달받은 데이터를 가지고 웹 페이지의 일부분만을 갱신하는 자바스크립트를 호출한다.
결과적으로 웹 페이지의 일부분만이 다시 로딩되어 표시되는 것이다.
3. AJAX의 특징
- 비동기 방식
비동기 방식이란, 서버에 데이터를 요청하면 응답받을 때까지 기다려야하는데, 이 기다리는 시간동안 다른 작업으로 이동해 작업을 하다가 응답이 오면 callback을 통해 이전 작업으로 돌아가는 것을 말한다. 이를 통해 웹페이지를 리로드하지 않고 데이터를 불러올 수 있는 것이다.
- 여러 기술들과 혼합
HTML, CSS, Javascript, DOM, XML 등의 기술들을 함께 사용해야만 사용할 수 있다.
- 스프링에서의 활용성
Jackson Library를 통해 스프링 개발의 생산성을 높여줄 수 있다.
4. AJAX의 장단점
| 장점 | 단점 |
| 웹페이지의 속도가 향상된다 | 히스토리 관리가 안된다. |
| 비동기식 처리를 통해 효율성을 높일 수 있다 | 통신할 때 페이지 이동이 없기 때문에 보안상 문제가 발생할 수 있다. |
| 데이터만 전송하면 되기때문에 전체적인 코딩의 양이 줄어든다 |
연속으로 데이터를 요청하면 서버 부하가 증가할 수 있다. |
| 기존 웹에서는 불가능했던 다양한 UI를 가능하게 해준다. 예를 들어Flickr의 경우,사진의 제목이나 태그를 페이지의 리로드 없이 수정할 수 있다 |
XMLHttpRequest를 통해 통신하는 경우, 사용자에게 아무런 진행 정보가 주어지지 않는다. (요청이 완료되지 않았는데 사용자가 페이지를 떠나거나 오작동할 우려가 발생하게 된다.) |
| AJAX를 사용할 수 없는 브라우저가 있다. | |
| HTTP 클라이언트의 기능이 한정되어 있다. | |
| 지원하는 charset이 한정되어 있다. | |
| Script로 작성되기 때문에 디버깅이 어렵다. | |
| 동일-출처 정책으로 인하여 다른 도메인과는 통신이 불가능하다. (Cross-Domain문제) |
** 참고 자료 **
생활코딩 WEB3-Ajax : https://www.youtube.com/playlist?list=PLuHgQVnccGMA9-1PvblBehoGg7Pu1lg6q
코딩팩토리 블로그: https://coding-factory.tistory.com/143
김코더 김주역님 블로그: https://kimcoder.tistory.com/113
TCP스쿨: http://www.tcpschool.com/ajax/intro
surim님 블로그: https://velog.io/@surim014/AJAX%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80