[jQuery] ajax 모듈화 시키기(트랜잭션 공통코드 만들기)

 

ajax 코드를 화면마다 길게 작성을 하는 것보단

공통코드화(함수화) 시켜서

코드를 짧게 사용하고 싶어 만든 코드입니다.

 

먼저 ajax를 사용하여 백앤드 호출하는 코드입니다.

$.ajax({
    type : 'GET',
    url : "api/example",
    data : {},
    dataType : "json",
    success : function(data) {
        // 성공시 로직
    },
    error : function() {
        // 에러시 로직
    }
});

 

이런 식으로 화면마다 작성하게 됩니다.

 

이제 함수화를 시켜보겠습니다.

따로 transaction.js 파일을 만들어서 작성하겠습니다.

 

transaction.js  (사용언어에 따라 조금씩 수정해서 사용해 주시면 되겠습니다.)

function transaction(svcId, type, url, inData, errorMsg, callback) {
 
    var ajaxOptions = {
        type: type,
        url: url,
        data: inData,
        dataType: "json",
        success: function(data) {			
            callback(data);
        },
        error: function(error) {
            console.log(errorMsg);
        }
    };
 
    if (type === "post") {
        ajaxOptions.headers = {
            "Content-Type": "application/json",
            "X-HTTP-Method-Override": "POST"
        };
    }
 
	$.ajax(ajaxOptions);
}

 

post 요청일 경우에만 Content-Type과 X-HTTP-Method-Override를 넣어줍니다.

백앤드 요청 성공 시 콜백함수를 선언해 줍니다.

백엔드 요청 실패 시 에러 문구를 띄워줍니다.

 

이제 index.jsp 에서 transaction.js를 사용하여

트랜잭션을 태워보겠습니다.

 

index.jsp (사용언어에 따라 조금씩 수정해서 사용해 주시면 되겠습니다.)

var svcId = "test";
var type = "GET";
var url = "/api/example";
var inData = {};
var errorMsg = "test error";
 
transaction(svcId, type, url, inData, errorMsg, fnCallback(svcId));
 
function fnCallback(svcId) {
    return function(data) {
        if (svcId === "test") {
            console.log("svcId = " + svcId);
            console.log("data = " + JSON.stringify(data));
        }
    }
};

 

변수를 선언한 후

tracsaction(~~) 함수를 태워 보내줍니다.

성공 시 fnCallback이라는 함수를 타게 되고 if 문안에 svcId가 test인 코드가 타게 됩니다.

 

콘솔창에는

svcId = test
data = [~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~]

 

가 나오게 됩니다.

 

트랜잭션 함수를 여러 번 태울 경우

$(document).ready(function() {
 
    var svcId = "onload";
    var type = "GET";
    var url = "/api/onload";
    var inData = {};
    var errorMsg = "onload error";
 
    transaction(svcId, type, url, inData, errorMsg, fnCallback(svcId));
 
 
    $("#searchList").on("touchstart click", function(e) {
        e.preventDefault();
 
        var svcId = "test";
        var type = "GET";
        var url = "/api/example";
        var inData = {};
        var errorMsg = "error";
 
        transaction(svcId, type, url, inData, errorMsg, fnCallback(svcId));
 
    });
 
 
function fnCallback(svcId) {
    return function(data) {
        if (svcId === "onload") {
            console.log("svcId = " + svcId);
            console.log("onload 성공");
        }
        if (svcId === "test") {
            console.log("svcId = " + svcId);
            console.log("data = " + JSON.stringify(data));
        }
    }
};

 

이런 식으로 콜백함수에 svcId === "" 일 때 {}로 추가 작성해 주시면 되겠습니다.

 

---

위의 코드에서 불편한 점은

return function(data) {} 를 넣어야 한다는 점과

 

success했을 때 data가 없는 경우(저장한 후 로직) 

에러가 난다는 점입니다.

 

수정된 코드입니다.

 

/*
 * 01. JS명   : transaction.js
 * 02. 내용 
 *   ● svcId     : 트랜잭션 ID
 *   ● type      : Http Method(GET, POST, PUT, DELETE)
 *   ● url       : api 호출 url
 *   ● inData    : 송신 {json형식}
 *   ● errorMsg  : 에러메시지
 *   ● callback  : 콜백함수(고정)
 * 03. 작성자   :  JaeYong's coding
 * 04. 사용예시
 *   ● var svcId = "test";
 *	   var type = "GET";
 *	   var url = "/";
 *	   var inData = {};
 *	   var errorMsg = "error";
 *		
 *	   transaction(svcId, type, url, inData, errorMsg, fnCallback);
 *
 *   ● function fnCallback(svcId, data) {
 *	       if (svcId === "test") {
 *             // 콜백 코드 작성
 *	       }
 *	   };
*/
function transaction(svcId, type, url, inData, errorMsg, callback) {
	
	var ajaxOptions = {
		type: type,
		url: url,
		data: inData,
		/*dataType: "json",*/
		success: function(data) {
            if (data) {
                callback(svcId, data);
            } else {
                data = '';
                callback(svcId, data);
            }
        },
        error: function(error) {
            console.log(errorMsg);
        }
    };
 
    if (type === "POST") {
        ajaxOptions.headers = {
            "Content-Type": "application/json",
            "X-HTTP-Method-Override": "POST"
        };
    }
 
    $.ajax(ajaxOptions);
}

 

 위의 js 형식으로 만들어주고

 

실제 사용은 (위에 트랜잭션 호출 방식은 동일합니다.

function fnCallback(svcId, data) {
    if (svcId === "search") {
        // ajax success 했을 때 로직
    }
}