[JavaScript/jQuery] 실무에서 사용하는 ajax

안녕하세요! Plitche(플리체)입니다.
이번 포스팅의 주제는 [jQuery] 실무에서 사용하는 ajax 비동기통신 입니다.

Intro

첫 프로젝트에 들어가기 전까지만 해도, 앞서 ajax 비동기통신 간단하게 사용하기처럼 매번 필요할 때 마다 ajax 문법에 맞추어 모든 내용을 작성하고는 했다.

물론 당연히 정상 작동하지만, 스크립트 코드 길이가 길어지면 찾기도 수정하기도 번거롭고 어려워진다.

때문에 이번 포스팅에는 내가 첫 프로젝트에 투입이 되어서 나름 충격을 받았던 부분에 대해서 공유 하고자 한다.

사실 생각해보면 간단한데.. 왜 생각을 못했을까 ㅠㅠ

일반적인 ajax

$.ajax({
    url: '', // Controller의 mapping값
    type: '',  // get, post 방식 中
    data: '',  // Controller로 보낼 데이터
    contentType: '',  // 보내는 data의 타입
    dataType: '', // 받을 데이터 타입
    success: function() {},  // 정상적으로 return 받았을 때 실행할 함수
    error: function(){} // 실패했을 때 작동할 함수
});

위의 속성을 제외해도 ajax에는 더 많은 속성들이 존재한다. 매번 위의 코드를 작성하려고 하면 정말 귀찮다...

때문에 js파일에 ajax폼을 미리 만들어두고  필요 할 때 마다 jsp파일에서 호출하여 사용하는 것이다.

실무에서 ajax

• 아래와 같이 간단한 view를 구성하였다. 이름을 작성하면 DB를 통하여 그 사람의 나이를 alert으로 띄워주는 것이다.
  (plitche를 검색하면 나이가 나온다..)

js파일 code

var getAjax = function(sendUrl, sendType, sendData, sendContentType, sendDataType, result) {
    $.ajax({
        url: sendUrl, 
        type: sendType,
        data: sendData,
        contentType: sendContentType,
        dataType: sendDataType,
        success: result,
        error: function(){alert('fail');}
    });
} 

위와 같이 함수를 저장할 변수를 만들어서 ajax 비동기통신을 황룡하기 위한 매개변수들을 미리 설정해 둔다.

jsp, script 코드

function fn_getAjax() {
    var sendName = $('#name').val(); // 입력한 value 가져오기

    // 만들어놓은 getAjax 함수 호출
    getAjax('getAge.do', 'get', {name: "sendName"}, 'json', 'text', function(responseObj) {
        if (responseObj.result) {    // DB에서 select한 결과가 없을 경우
            alert('없는 이름입니다.');
        } else {     // DB에서 select한 결과가 있는 경우
            alert('벌써..' + resonseObj.age + '살...ㅠㅠ');
        }
    });
}

js파일에서 미리 만들어 놓은 getAjax함수를 호출하여 필요한 data를 인자 자리에 넣어 줌으로써, 모든 속성을 다 작성하였던 귀찮음을 덜 수 있다.

Utilize (활용)

• 위의 예제 처럼 ajax함수를 호출할 때 마다 필요한 인자를 모두 다 작성하는것이 혹 번거롭다면, 필요에 의해서 사용법마다 여러 메소드를 미리 만들어 놓을 수도 있다.

예제로는 type에 대해서 간단히 get, post를 분리해 보겠다.

var getAjax = function(sendUrl, sendData, sendContentType, sendDataType, result) {
  $.ajax({
    url: sendUrl, 
    type: 'GET',
    data: sendData,
    contentType: sendContentType,
    dataType: sendDataType,
    success: result,
    error: function(){alert('fail');}
  });
} 

var postAjax = function(sendUrl, sendData, sendContentType, sendDataType, result) {
  $.ajax({
    url: sendUrl, 
    type: 'POST',
    data: sendData,
    contentType: sendContentType,
    dataType: sendDataType,
    success: result,
    error: function(){alert('fail');}
  });
} 

ajax의 type을 'GET', 'POST' 타입으로 분리하여 function을 만들어 두면 본인이 필요한 함수만 호출하면 되는 것이다.
그럼 더 이상 type에 대한 인자를 전달할 필요가 없어진다!

review

• 정말 별것 아니라고 생각되는 부분이지만, 학원 수료 후 첫 프로젝트에 투입되었을때 적지않게 충격을 받았던 부분이라서 정리하게 되었습니다. 단 한순간 개발 후 운영을 하지 않는다면 모를까, 코드의 재사용과 유지/보수의 용이함은 항상 신경써야 하는 부분이기 때문입니다.
• 물론 output도 중요하지만, How (어떻게) 작동하는지를 항상 생각할 줄 아는 개발자가 됩시다!^^ 다음 포스트에서 만나요!