Ajax(Asynchronous Javascript & XML)란 자바스크립트를 통한 비동기 통신 기술 구현 방식을 의미한다.
데이터을 이동하고 화면을 구성하는데 있어서 웹 화면을 갱신하지 않고 필요한 데이터를 서버로 보내고 가져오는 방법이다.
화면 갱신이 없어서 사용자 입장에서는 매우 편리하고 빠르게 작업을 처리하는 것처럼 느끼게하지만, 동적으로 구성하는 만큼 개발자의 구현은 복잡해진다.
Ajax에서의 데이터 전송은 비동기식으로 데이터가 전송되는데 비동기식에 대해 설명하기 전에
동기식 데이터 전송이란 서버로 데이터를 요청하고 응답이 오는 시간동안 작업을 멈추고 기다리는것을 뜻한다.
ex) 로그인 시에 ID/PASSPWORD를 입력하고 서버로 전송후
서버로부터 응답을 받으면 로그인 성공or실패 웹페이지로 이동
동기식 데이터전송에대한 그림 ↓
반면 비동기식 데이터 전송은 Ajax가 구현하는 방식인데 서버로 데이터를 요청하고 응답을 기다리는 동안 웹은 자신의 다른 업무를 진행하고 응답이 오면 그 후 작업을 진행하는 방식을 말한다. 즉, 사용자 입장에서는 화면갱신도 없고, 요청-응답 사이 시간에도 다른 을을 진행 할 수 있기 때문에 편리하고 빠르게 작업을 처리하는 것처럼 느낀다.
비동기식 데이터전송에대한 그림 ↓
간단하게 JavaScript에서의 Ajax구현 방법을 알아보면 XMLHttpRequest객체(이하 XHR)는 반드시 필요한 객체이다.
XMLHttpRequest객체를 통해서 서버에게 데이터를 흔적없이 주고 받는다고 보면된다(background방식).
대부분의 Webrowser는 XHR을 지원해 주지만 인터넷익스플로러(IE), 특히 IE7이하 버전에서는 지원해주지 않는다.
그래서 IE에서는 ActiveXObject를 사용하는데 XHR이 ActiveXObject를 모방하여 만들어 졌으므로 구현에는 별로 차이가 없다.