AJAX 개념과 활용법

아래 내용은 기본중에 기본이죠....

그러나 제가 읽어둘 목적으로 올리는 내용이라, ^^;

1. 비동기 방식과 동기 방식의 차이점

동기 방식의 경우 서버에 신호를 보냈을 때 응답이 돌아와야 다음 동작을 수행할 수 있지만, 비동기 방식은 그와 반대로 신호를 보냈을 때 응답 상태와 상관 없이 동작을 수행할 수 있다. 비동기 방식인 Ajax의 주목적으로는 화면 전환 없이 클라이언트 측과 서버측 간의 정보를 교환하기 위해서이다. 비동기 방식을 이용하면 자료를 요청할 때 걸리는 시간에 대해 클라이언트가 기다릴 필요없이 다른 작업을 바로 수행할 수 있다는 장점이 있다.

2. Ajax 개념

기존에는 Ajax는 Asynchronous Javascript and XML의 약자로 사용되었으나 이후에는 웹 어플리케이션 개발에 사용되는 기술 그룹을 말한다. 비동기  자바스크립트를 이용한 비동기 통신으로 데이터를 불러올 수 있다. Ajax를 쓰는 장점은 다음과 같다.

1. 페이지의 갱신없이(이동없이) 서버와 비동기 통신이 가능하다.

2. 새로고침없이 부분 부분 로딩이 되므로 성능이 개선되어 속도가 빠르다.

3. 별다른 플러그인 없이 이용할 수 있다.

4. 학습 비용이 크지 않고, 조금만 시간을 투자하면 쉽게 익혀 사용할 수 있다.

5. HTTP 전송 중에도 사용자가 웹 어플리케이션과 상호작용을 할 수 있다.

장점 중 5번을 조금 더 자세히 살펴보면, 기존 웹 어플리케이션에서 웹 인터페이스에서 사용자 상호 작용으로 시작된 HTTP 요청이 웹서버로 전달되며, 웹 서버는 요청을 처리한 후 웹 사용자에 HTML 페이지를 리턴한다. 이 과정에서 HTTP 전송 중에는 사용자는 웹 어플리케이션과 상호 작용을 할 수 없다. 

하지만 Ajax 통신을 이용하면 클라이언트 화면을 랜더링하고 사용자와 서버 간의 HTTP 전송과는 별도로 웹 어플리케이션과 상호 작용을 할 수 있어 사용자와 웹어플리케이션 사이의 상호 작용이 중단되지 않는다.

(이점에 대해 "동기와 비동기 차이"를 검색하면 자세히 알 수 있다. )

물론 Ajax를 실제 사용해보니 데이터를 어떻게 가공하느냐에 따라서 데이터 가공이 복잡한 경우도 있지만, 큰 학습 비용없이 익힐 수 있다는 점과 성능 개선이 큰 장점인 듯 하다. 

실제 사용하는 곳은 포털 사이트의 자동완성 검색 기능이나, 상황에 따라서는 레이어 모듈 팝업에서도 많이 쓰인다.

3. Ajax 의 기본 사용법

$.ajax({
      type:"GET",
      url:"/test",
      dataType:"JSON", //
      success : function(data) {
            // 통신이 성공적으로 이루어졌을 때 이 함수를 타게 된다.
            console.log(data)    //받아온 data에 대해 출력된다.
      },
      complete : function(data) {
            // 통신이 실패했어도 완료가 되었을 때 이 함수를 타게 된다.
            // TODO
      },
      error : function(xhr, status, error) {
          // 통신이 실패했을때 alert 창이 뜬다.
            alert("에러발생");
      }

[출처 및 참고]

https://www.ibm.com/support/knowledgecenter/ko/SSEQTP_8.5.5/com.ibm.websphere.wdt.doc/topics/cajax.htm