1) AJAX란?
AJAX(Asynchronous JavaScript And XML)란 비동기 자바스크립트와 XML을 말한다. 쉽게 설명하면, 서버와 통신을 하기 위해 XMLHttpRequest 객체를 사용하는 것을 말한다. 이때 JSON, XML, HTML, 일반 텍스트 형식을 포함한 다양한 포맷을 주고받을 수 있다. 현재는 JSON을 가장 많이 다룬다고 한다.
비동기(async) 방식이란?
- 웹페이지를 새로고침하지 않고 데이터를 불러오는 방식을 뜻한다. 전체 페이지를 새로고침 하지 않고 필요한 일부의 데이터만을 갱신할 수 있게 해 준다.
AJAX를 사용하는 가장 큰 이유는, 페이지 전체를 새로고침(Refresh) 하지 않고서도 수행되는 "비동기성" 때문이다.
예를 들어 설명하자면, 회원가입 시 아이디 중복체크를 하는 과정에서 기존에 사용자가 작성했던 항목들이 지워지는 것이 아니라, 필요한 일부분만 업데이트를 할 수 있도록 하는 큰 장점이 있는 것이다.
AJAX 기술을 사용하지 않는 웹페이지는 특유의 깜빡거림 현상이 생기는데, 이는 매번 작업을 수행할 때마다 페이지를 전부 지우고 다시 모든 것을 그려내기 때문이라고 한다. 이러한 문제점들을 AJAX를 사용하면서 해결할 수 있는 것이다.
AJAX의 주요 두 가지 특징은 다음과 같다.
첫째, 페이지를 새로고침(Refresh) 하지 않고서 서버에 요청할 수 있다.
둘째, 서버로부터 데이터를 받고 작업을 수행한다
2) AJAX의 장단점
장점
- 페이지 이동 없이 고속으로 화면을 전환할 수 있다.
- 서버 처리를 기다리지 않고, 비동기 요청이 가능하다.
- 수신하는 데이터 양을 줄일 수 있고, 클라이언트에게 처리를 위임할 수도 있다.
- 플러그인 없이도 인터렉티브 한 웹페이지를 구현할 수 있다.
단점
- AJAX를 쓸 수 없는 브라우저에 대한 문제가 있다.
- HTTP 클라이언트의 기능이 한정되어 있다.
- 페이지 이동 없는 통신으로 인한 보안상의 문제가 발생한다.
- 지원하는 자료형(Charset)이 한정되어 있다.
- 스크립트로 작성되므로 디버깅이 용이하지 않다.
- 요청을 남발하면 역으로 서버 부하가 늘 수 있다.
- 다른 도메인과는 통신이 불가능하다.
3) AJAX의 동작원리
AJAX는 위의 그림과 같은 순서로 동작한다.
먼저, 사용자가 요청한 이벤트가 발생한다. 요청한 이벤트가 발생하면 이벤트 핸들러에 의해 자바 스크립트가 호출되고, 자바스크립트는 이를 XMLHttpRequest 객체를 사용하여 서버로 요청을 보낸다. 웹 브라우저가 서버에 요청을 보낸 뒤 서버의 응답을 기다리는 것이 아니라 다른 작업을 처리할 수 있다. 이후, 서버는 전달받은 XMLHttpRequest 객체를 가지고 Ajax 요청을 처리한다. 그리고 서버는 처리한 결과를 필요한 데이터의 형식에 맞추어 웹 브라우저에 전달한다.
이때, 데이터는 HTML, XML 또는 JSON형태로 전달하는데, 요즘은 JSON 형식으로 전달하는 방식을 가장 많이 사용한다고 한다. 서버로부터 전달받은 데이터를 가지고 웹 페이지의 일부분만을 갱신하는 자바스크립트를 호출한다.
마지막으로 웹 페이지의 일부분만이 다시 로딩되어 표시되며 동작이 완료된다.
