(기술) Ajax

이번 프로젝트를 진행하면서 front end 개발을 처음으로 제대로 해보게 되었는데 HTML이나 자바스크립트는 그럭저럭 사용할 수 있었지만 Ajax를 사용하는 것이 참 어려웠습니다. PHP를 통해서 웹 개발을 하면서 사용해 본 적이 있었지만 Ajax가 뭔지도 잘 모르면서 페이지 갱신 없이 데이터를 변경하는데 쓰인다는 것만 알고 인터넷 소스를 가져다가 사용했었기 때문에 개발환경이 자바로 바뀌면서 적용시키질 못하였고 이번 기회에 블로그에 개념이라도 정리를 해보고 싶었습니다.

Ajax(Asynchronous JavaScript and XML, 에이잭스)는 대화식 웹 애플리케이션의 제작을 위해 아래와 같은 조합을 이용하는 웹 개발 기법이다.

• 표현 정보를 위한 HTML (또는 XHTML) 과 CSS
  
• 동적인 화면 출력 및 표시 정보와의 상호작용을 위한 DOM, 자바스크립트
  
• 웹 서버와 비동기적으로 데이터를 교환하고 조작하기 위한 XML, XSLT, XMLHttpRequest (Ajax 애플리케이션은 XML/XSLT 대신 미리 정의된 HTML이나 일반 텍스트, JSON, JSON-RPC를 이용할 수 있다).

Ajax는 자체가 하나의 특정한 기술을 말하는 것이 아니며, 함께 사용하는 기술의 묶음을 지칭하는 용어이다.

제가 이해한 것을 정리해본다면 Ajax는 XML, JSON 등을 이용하여 웹 서버와 비동기적으로 데이터를 교환하고 DOM, 자바스크립트를 이용하여 HTML에 변경된 데이터를 표현하는 기법입니다.

기존 기술과 Ajax의 차이점

• 기존의 웹 애플리케이션: 브라우저에서 폼을 채우고 이를 웹 서버로 제출(submit)을 하면 하나의 요청으로 웹 서버는 요청된 내용에 따라서 데이터를 가공하여 새로운 웹 페이지를 작성하고 응답으로 되돌려준다. 이때 최초에 폼을 가지고 있던 페이지와 사용자가 이 폼을 채워 결과물로서 되돌려 받은 페이지는 일반적으로 유사한 내용을 가지고 있는 경우가 많다. 결과적으로 중복되는 HTML 코드를 다시 한 번 전송을 받음으로써 많은 대역폭을 낭비하게 된다. 대역폭의 낭비는 금전적 손실을 야기할 수 있으며 사용자와 대화(상호 반응)하는 서비스를 만들기 어렵게도 한다.
  
• Ajax 애플리케이션: 필요한 데이터만을 웹 서버에 요청해서 받은 후 클라이언트에서 데이터에 대한 처리를 할 수 있다. 보통 SOAP이나 XML 기반의 웹 서비스 프로토콜이 사용되며, 웹 서버의 응답을 처리하기 위해 클라이언트 쪽에서는 자바스크립트를 쓴다. 웹 서버에서 전적으로 처리되던 데이터 처리의 일부분이 클라이언트 쪽에서 처리 되므로 웹브라우저와 웹 서버 사이에 교환되는 데이터 량과 웹 서버의 데이터 처리량도 줄어들기 때문에 애플리케이션의 응답성이 좋아진다. 또한 웹 서버의 데이터 처리에 대한 부하를 줄여주는 일이 요청을 주는 수많은 컴퓨터에 대해서 일어나기 때문에 전체적인 웹 서버 처리량도 줄어들게 된다.

장점

• 페이지 이동없이 고속으로 화면을 전환할 수 있다.
• 서버 처리를 기다리지 않고, 비동기 요청이 가능하다.
• 수신하는 데이터 양을 줄일 수 있고, 클라이언트에게 처리를 위임할 수도 있다.

단점

• Ajax를 쓸 수 없는 브라우저에 대한 문제가 있다.
• Http클라이언트의 기능이 한정되어 있다.
• 페이지 이동 없는 통신으로 인한 보안상의 문제
• 지원하는 Charset이 한정되어 있다.
• 스크립트로 작성되므로 Debugging이 용이하지 않다.
• 요청을 남발하면 역으로 서버 부하가 늘 수 있음.
• 동일-출처 정책으로 인해 다른 도메인과는 통신이 불가능하다.

예제 get-ajax-data.js:

// This is the client-side script

// Initialize the Ajax request
var xhr = new XMLHttpRequest();
xhr.open('get', 'send-ajax-data.php');

// Track the state changes of the request
xhr.onreadystatechange = function(){
 // Ready state 4 means the request is done
 if(xhr.readyState === 4){
  // 200 is a successful return
  if(xhr.status === 200){
   alert(xhr.responseText); // 'This is the returned text.'
  }else{
   alert('Error: '+xhr.status); // An error occurred during the request
  }
 }
}

// Send the request to send-ajax-data.php
xhr.send(null);

send-ajax-data.php:

<?php
// This is the server-side script<br>

// Set the content type
header('Content-Type: text/plain');

// Send the data back
echo "This is the returned text.";
?>