Ajax - Asynchronous JavaScript And XML (1/2)

Ajax는 비동기 웹통신 방식이다.

안드로이드를 배웠다면, 안드로이드의 어싱크탱크와 유사하다고 보면 된다.

사용자가 웹에서 작업을 할 때 보통 반응이 오면 웹페이지의 형식이 바뀐다.

Ajax는 이를 웹페이지 변화 없이 가능하게 한다. 예를 들어보자

이는 네이버의 회원가입 페이지이다.

아이디를 불가능하게끔 입력해보자

그러면 이런 메시지가 뜬다.

이러한 메시지는 즉시 발생하는 것이며, 웹페이지의 변화없이 발생한다.

Ajax가 적용된 웹페이지 인 것이다.

회원가입하는 사용자 입장에서 틀릴 때마다 틀린 정보를 알려주면서

웹을 갱신해버리면 이전에 알맞게 쓴 항목까지도 새로 써야하니 짜증이 이만저만이 아닐 것이다.

Ajax는 이러한 고민을 해결해주는 훌륭한 도구이다.

Ajax의 적용원리는 아래와 같다.

/*
Ajax 동작 원리:
1. 브라우저(클라이언트):
   1) XMLHttpRequest 객체를 생성
   2) XMLHttpRequest를 서버로 전송
   3) 요청 전송 후에는 응답(resposnse)를 기다리지 않음
2. 서버:
   1) HttpRequest를 처리 -> HttpResponse 객체를 생성
   2) 데이터(응답)을 클라이언트(브라우저)에게 전송
3. 브라우저(클라이언트):
   서버에서 전송된 데이터를 자바스크립트를 사용해서 처리
   -> 페이지의 컨텐트를 업데이트(화면 갱신)
*/

간단한 테스트 코드를 짜보자

$(document).ready(function() {
   $('#btn').click(function() {
      // 1. XMLHttpRequest 객체 생성
      var xhr = new XMLHttpRequest();
      
      // 2. open(method, url, async) 함수를 호출
      xhr.open('GET', 'test.txt', true);
      
      // 3. send() 함수를 호출해서 서버로 요청을 보냄
      xhr.send();
      
      // 4. 서버에서 응답(response)가 왔을 때 할 일을 콜백 함수로 정의
      xhr.onreadystatechange = function() {
         var log = $('#log');
         var result = $('#result');
         var html = log.html();
         
         // readyState의 변화를 로그로 출력
         if (xhr.readyState === 0) {
            log.html(html + '요청이 초기화되지 않음<br/>');
         } else if (xhr.readyState === 1) {
            log.html(html + '서버와 연결 설정됨<br/>');
         } else if (xhr.readyState === 2) {
            log.html(html + '서버가 요청을 받음<br/>');
         } else if (xhr.readyState === 3) {
            log.html(html + '서버가 요청을 처리중<br/>');
         } else if (xhr.readyState === 4) {
            log.html(html + '서버에서 요청 처리 종료. 응답 준비됨.<br/>');
         }
         
         // 화면 업데이트:
         // readyState === 4 && status === 200(HTTP OK)
         if (xhr.readyState === 4 && xhr.status === 200) {
            result.html(xhr.responseText);
         }
      };
   });
});

jstl을 이용한 코드이다.

코드로 비동기 요청을 보내고 서버에서 그 상태를 항시 리턴해주며

그 결과를 읽어주는 코드이다.

마지막 속성을 읽는 코드의 상태는 이렇게 된다

즉 readyState가 4이고, status가 200일 경우 서버에서 처리를 완료했으므로

요청한 내용을 웹에서 사용해도 됩니다. 라고 말해주고 있는 것이다.

실행하게 되면 이러한 웹페이지가 출력된다.

클릭 버튼을 눌러보자

간단한 내용이라 순식간에 처리되고

결과값을 리턴해줬다.

안드로이드에서 어싱크를 다룰 때는 정말 조심히 했어야 했다.

뻑하면 앱이 죽어버리고 짜증이 이만저만이 아니었는데

웹에서는 엄청 간단하고 수월한 듯 하다.

아직 초보레벨이라 그렇게 느끼는 것일지도 모르지만..

Ajax를 다루는 코드는 정말 다양하다.

모든 방법을 다루기는 힘드니, 

다음 포스트에서는 가장 많이 사용하는 jQuery를 사용한 $.ajax에 대해서 알아보도록 하겠다.