[WEB] Ajax (Asynchronous JavaScript And XML)

Ajax란 무엇인가?

비동기식 javascript, XML을 나타내며, 클라이언트와 서버와의 통신을 위해서 XMLHttpRequest 객체를 사용한다.
JSON, XML, HTTP 형식의 포맷을 주고받을 수 있으며, 이러한 Ajax의 강력한 부분은 비동기라는 점이다.

 

비동기식이란, 서버와의 통신에서 Refresh 없이도 요청에 대한 리소스가 출력된다거나, 즉각적인 반응을
일으킨다는 것이다. 이러한 부분을 통해서 사용자의 event를 통해 전체 페이지가 아닌 일부분만 업데이트가 가능하다. 

 

왜 사용하는가?

웹 개발, 특히 전체 페이지를 고치지 않고 특정한 일부 부분만 업데이트를 위해 페이지를 Refresh 하지 않고도, 업데이트 및 데이터 교환이 발생하는 단일 페이지에서 유용하게 사용된다. 이는 서버 요청에 대한 전반적인 성능을 향상하고, 클라이언트 측 사용자의 입력에 보다 빠른 응답을 기대할 수 있다. 
용약 하면 크게 두 가지의 이점이 존재한다.

1. Reresh 없이 서버에게 요청을 할 수 있다.
2. 서버로부터 데이터를 주고받으며 작업을 수행할 수 있다. 
3. 수신하는 데이터 양을 줄이며, 클라이언트 측에서 데이터를 처리한다.
4. 플러그인 없이 인터렉티브 한 웹 페이지 구현이 가능하다.

 

Ajax는 어떻게 동작하는가?

1. 사용자의 요청으로 인한 이벤트가 발생된다.
2. 이벤트 발생에 따른 자바스크립트 함수가 실행된다.
3. 실행된 자바스크립트 함수는 XMLHttpRequest 객체를 사용하여 서버로 전달된다. (비동기식)
4. 서버는 요청에 따른 XMLHttpRequest 객체를 통한 Ajax 요청을 처리한다.

출처 : 위키백과(https://ko.wikipedia.org/wiki/Ajax)

위 사진을 통해 기존의 통신 방식과 ajax를 통한 통신의 차이점을 확인할 수 있다.

쉽게 요약하면, 기존의 웹 애플리케이션에서의 동작방식은  브라우저에서 form을 채운 후 웹서버로 제출하면 서버는 요청에 맞게 데이터를 가공하여 리소스를 작성하고 응답한다. 이 때 유사한 내용물의 HTML코드들이 상당수 존재하는 경우가 있다. 이럴 경우 많은 대역폭을 낭비하게 되어, 상호작용서비스를 만들기에 제한이 있다.

 

Ajax를 사용한 웹 애플리케이션은 필요한 데이터만 요청하여, 클라이언트 측에서 데이터에 대한 처리를 할 수 있다. 기존 방식 경우 웹 서버에서 전적으로 처리되었다면, 이 때는 동적으로 처리되며, 웹 브라우저와 웹 서버 간의 교환 데이터량과 웹 서버의 데이터 처리량도 줄어들어 빠르다는 장점이 존재한다.

어떻게 사용하는가?

javascript를 사용하여, 서버와의 통신을 위한 HTTP reqeusts를 사용하는 Object의 인스턴스가 필요하다.

Example 1 

var XMH = new XMLHttpRequest()
XMH.open("POST","URL",True)
XMH.setRequestHeader("~~")
XMH.send("Data1=Data1&Data2=Data2")

Example 2

var XMH = new XMLHttpRequest()
XMH.open("GET","URL",True)
XMH.setRequestHeader("~~")
XMH.send()

Example 3

XMH.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
  }
};

 

readyState 프로퍼티는 서버로부터 전압 상태를 나타내며,

0: 초기화되지 않음, 1: 로드 중, 2: 로드됨, 3: 대화형, 4: 완료이다.

 

이러한 Ajax의 비동기식 특성을 이용하여, Stealth CSRF 공격기법으로 응용이 가능하다.

 

 

 

 

 

참고자료
http://www.tcpschool.com/ajax/intro
https://developer.mozilla.org/ko/docs/Web/Guide/AJAX/Getting_Started 

 

 

※ 내용이 이상하거나 문제가 있을경우, 또는 설명에 부족한 내용이 있으시면 알려 주시면 감사합니다.