코드를 좀 더 효율적으로 코딩하기 위해 jsp에서 자주 반복되는 ajax부분을 따로 JS파일로 빼려고 한다.
이 작업을 하는 가장 큰 이유는 코드의 재사용을 줄이기 위해서이다.
기존에는 Servlet에 request 요청을 하고 싶을 때마다 그 jsp 안에서 ajax코드를 다 써야한다.
하지만 공통으로 사용중인 ajax로 통신하는 부분을 js로 빼놓으면 jsp에서 ajax를 쓰고 싶을 때 해당 함수 호출만 하면되는 간편함이 생긴다.
시작해보자 !
먼저 js파일을 만들어서 공통으로 사용할 함수를 생성해준다. 나는 ajax통신 부분을 ajaxFunc() 함수로 만들었다.
//ajax 함수 - js파일에 생성
function ajaxFunc(url, param, callback){
console.log("js파일의 AjaxFunc 실행!!");
$.ajax({
type : 'POST',
url : url,
data : param,
traditional : true,
contentType : 'application/x-www-form-urlencoded; charset=UTF-8',
success :function(returnData){
callback(returnData);
$.ajaxSettings.traditional = false;
},
error : function(error){
alert("file을 불러오지 못했습니다.");
console.log("notice insert fail : "+error);
}
});
}
그다음에 이제 저 js파일을 호출해 줄거다.
jsp에서 js파일에 있는 함수를 호출하기 위해서는 <head>에 사용할 js파일을 호출해줘야 된다.
C언어에서는 include, Java에서는 import와 비슷한 역할을 한다.
//js파일 호출하는 명령어
<script type="text/javascript" src="${ctx}/resource/js/ajaxFunc.js"></script> src에는 js파일이 있는 주소를 넣어주면된다.
(+ HTML5에서는 script 태그의 속성 중 type="text/javascript" 를 생략할 수 있다.)
js파일을 호출해 줬으면 이제 js파일 내에 있는 함수를 사용할 수 있다.
//공지사항 삭제
function deleteNotice(){
var postData = { 'delKey' : checkBox() };
ajaxFunc('${ctx}/notice/delNotice.do', postData, function(returnData){
alert("삭제 완료!!");
location.href = "${ctx}/notice/notice_list.do";
});
}이렇게 ajax통신을 ajaxFunc( ) 함수 하나로 간편하게 반복 사용할 수 있다.
나는 예시로 삭제부분만 보여줬다.
함수 설명을 하자면 ajaxFunc( url주소, 보내는 data, callback함수); 이 형태이다.
+여기서 callback함수는 ajax통신 성공시 실행하는 함수 !
위 3가지는 기능마다 달라지는 값들이기 때문에 넣어줬다. Type을 GET, POST 둘다 사용하면 type을 넣어줘도 된다.
이렇게 하면 코드 라인도 줄어들고 전체적으로 가독성이 좋아진다.
갑자기 TMI이지만 나는 개발을 시작하면서 한가지 항상 머리속에 새기며 코딩을 하는데 그건 바로
"코드를 예쁘게 코딩하는 개발자" 이다.
여기서 예쁘게는 어떤 아무개님이 내 코드를 봐도 이해하기 쉽고 가독성이 좋은 깔끔함을 의미한다^&^!!
화이팅 !! :) ~~
'FE > JavaScript' 카테고리의 다른 글
| [javascript] 콜백(callback) 함수 사용이유 ,,? (3) | 2020.09.16 |
|---|---|
| [javascript] input 입력 글자 수 제한 (0) | 2020.09.10 |
| [javascript] IE상에서 오류나는 .remove() 호환가능한 대체 로직 (0) | 2020.08.27 |
| [javascript] console.log() 오류 _ IE11을 이용한 디버깅 (0) | 2020.08.26 |
| [javascript] html DOM control하기 (2) | 2020.06.23 |
댓글